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中文文档