VUE常用API

1.$set

数据变了，视图没变 this.$set(targe，key，value)

2.$nextTick:

返回参数[函数]。是一个异步的，功能获得更新后DOM

$nextTick(callback){
    return Promise.resolve().then(()=>{callback();})
}

3.$refs

获取dom

4.$el

获取当前组件根节点

5.$data

获取当前组件的data数据的

6.$children

获取当前组件的所有子组件，返回数组

7.$parent

找到当前父组件，如果找不到返回自身

8.$root

找到根组件

9.data定义数据

数据定义在return里面与外面的区别：return外面，单纯修改数据是不行的，没有被数据劫持；return可以修改，拥有getter/setter

10.computed

1)计算属性的结果可以被修改吗？可以，通过get和set写法

写法：

computed:{
    get(){
        return this.str.slice(-2)
    },
    set(val){
        this.str = val;
    }
}

2）v-model绑定的是computed来的，可以修改吗？需要通过通过get和set修改

11.watch

发生改变才执行

watch:{ 
    str(newValue,oldValue){
    } 
} //初始化不执行

watch:{ 
    str:{
        handler(newValue,oldValue){
        }  
    },
    immediate:true
}
//初始化监听

深度监听 obj.xxx

watch:{ 
    obj:{
        handler(newValue,oldValue){
        }  
    },
    immediate:true,
    deep:true
 }

12.methods和computed区别

computed有缓存机制，methods没有，调用几次执行几次

13.关于指令

1.自定义指令

<div v-demo='123'></div>

1）全局（main.js）

Vue.directive('demo',{
    inserted:function(a,b,c){
        console.log(a,b,c)
    }
})

2）局部

export default {
    directives:{
        demo:{
            bind:function(el){
                console.log(el);
            }
        }
    }
}

3）钩子函数

bind:只初始化调用1次

inserted:被绑元素插入父节点时调用

update:所在组件的VMode更新时调用，也可能发生在子组件更新之前

componentUpdated:指令所在组件以及子组件全部更新后调用

unbind:只调用一次，指令与元素解绑的时候调用

2.单向绑定

v-model:双向绑定 v-bind:单向绑定

v-bind:msg="msg"或者:msg

3.v-if与v-for优先级

vue2中：v-for > v-if

vue3中：v-if > v-for

vueAPI中文文档