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