VUE面试

watch

watch监听对象，需要深度监听,但还是拿不到oldVal
watch:{
    obj:{
        handler(oldVal,val){
            //oldVal === val
        },
        deep:true
    },
    info(oldVal,val){
        //基本类型
    }
}

v-for和v-if不能放在同一标签中使用。

v-model

v-model.trim="name"
v-model.lazy="name"
v-model.number="age"

@click

@click="add(2,$event)"
add(val,e){}

兄弟组件通讯

1、弄一个父组件
2、通过vuex
3、eventBus（事件车）
**第一步：创建一个js文件，eventBus.js**
import Vue from 'vue'
export default new Vue()
**第二步：在top组件中，引入刚才的js**
import event from '@/eventBus.js' 
event.$emit('add',this.data);
**第三步：在left组件中也先让引入eventBus.js，然后使用created生命周期函数（要接受数据的组件）**
import event from '@/eventBus.js' 
event.$on('add',(data)=>{});

自定义v-model

{{name}}
<input :value="name" @input="change($evevt.target.value)">

$nextTick

Vue是异步渲染框架
data改变之后，DOM不会立刻渲染
操作DOM，获取最新DOM应该用这个,页面渲染时会将data的修改做整合，多次修改data只会渲染一次
this.$nextTick(()=>{
    
})

vue动态组件

<component :is="组件名"/>
最常用的就是tab切换

异步引入组件

import name from ‘’；这种方式是同步引入的
components:{
    AA:() => import('@/')
}

mixin

import myMixin from './mixin'; //一个JS文件
export default{
    mixins:[myMixin]
}

Vue原理

function observe(target){
    if(typeof target!=='object' || target===null){
    //不是对象或数组
    return target
    }
    //遍历data对象
    for(let key in target){
        defineReactive(target,key,target[key])
    }
}
function defineReactive(target,key,value){
    //深度监听,数据是对象或数组
    observe(value);
    //核心 API
    Object.defineproperty(target,key,{
        get(){
            return value
        },
        set(newValue){
            if(newValue !== value){
                //深度监听
                observe(newValue);
                
                value = newValue
                //触发更新视图
                updateView();
            }
        }
    })
}
function updateView(){
    //视图更新
}
var data={
    name:'张三',
    age:'20岁',
    sex:'男'，
    info:{
        address:''
    }
}
//监听数据
observe(data);

缺点：
1、深度监听，需要递归到底，一次性计算量大，如果数据很复杂，就会卡死
2、无法监听新增属性、删除属性（Vue.set Vue.delete）

如何监听数组的变化