一、computed
二、watch
- 当监听的数据发生变化而做出的动作;
- 数据怎么才算发生变化呢?
-
vue中,对于一个简单数据类型的值变了,那它肯定是发生变化了,毋庸置疑;
-
对于一个对象,你把对象里的简单数据类型的值变了,那么就只有这个简单数据类型发生变化了,这个对象是没有发生变化的(因为对于一个对象,只要它的地址没变,那么它就没有发生变化)
-
对于一个对象,只有你把它的地址改变了,那么对象才会发生变化;
-
请问,如果obj原本就是{a: 'a'},现在再obj = {a: 'a'},那么obj变了吗(回答:变了,因为地址变了);obj.a变了吗(回答:没有变,因为它的值还是'a');所以总结下来,简单类型看值,复杂类型(对象)看地址;
-
但是!!!vue的watch提供了一个选项,可以直接监听对象里面的值是否发生变化,那就是
deep:true
!!!deep:true
就是监听obj的时候需不需要再往里深入看它里面值得变化; -
当你obj.a发生变化,那obj算不算也发生变化呢?如果需要的答案【它变了】,那么就用
deep:true
;如果需要的答案【它没变】,那么就用deep:false
; -
immediate:true
:第一次是否要执行; -
watch的属性里面绝对不要用箭头函数(就是它监听的属性的value),会导致this指向错误;例如
//watch的语法
new Vue({
watch:{
a: function(newValue,oldValue){}, //但是绝对不要写成 a: ()=>{}
a(newValue,oldValue){}, //这样写跟上面那种写法是一样的啊 es6的语法啊
b: [f1,f2] , //支持里面接受两个函数,不能用箭头函数啊!这两个函数会在b变化的时候依次执行
c: 'methodName', // methods里面的方法
d:{ handler: fn, deep: true, immediate: true},
'obj.a': function(){}
}
}).$mount('#app')
//watch还有另外一种写法,但一般不用这种
vm.$watch('a',function(){},{deep: true, immediate: true})
三、computed和watch的区别
1、 computed是计算属性;watch是监听的意思;
2、 解释computed:①computed是用来计算出一个值得,在使用的时候可以像属性一样直接用,不需要加括号;②它根据依赖会自动缓存,依赖的数据没有发生变化的话,那么它就不会再重新计算;
3、 解释watch:①watch是用来监听数据的变化,从而做出相应的动作;②它有两个属性,immediate表示在第一次渲染时是否执行这个函数,watch默认在第一次渲染时是不执行的;deep表示在监听一个对象时,是否要看它里面属性的变化;
如果有一种情况,computed和watch都可以用,那么优先选择使用computed
网友评论