computed:
是计算属性的意思。computed是用来计算出一个值得 ,调用这个值不需要加括号。依赖自动缓存,如果依赖不变,computed就不会重新计算。
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message
}
}
watch:
watch就是监听/侦听的意思。是有一个fun字段,表示在第一次渲染的时候需要执行这个函数,如果fun字段有变化,那么就会触发这个方法
watch:{
fun(new,old){
console.log(new,old)
}
}
定义:如果某个属性变化了,就去执行一个函数,这就是区别。
区别阐述:
computed
1、computed是计算属性,也就是依赖某个值或者props通过计算得来得数据;
2、 computed的值是在getter执行之后进行缓存的,只有在它依赖的数据发生变化,会重新调用getter来计算;
3、 不支持异步,当computed内有异步操作时无效,无法监听数据的变化;
watch
1、watch是监听器,可以监听某一个数据,然后执行相应的操作;
2、不支持缓存,数据变直接会触发相应的操作;
3、监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;
4、支持异步操作;
什么时候用computed 什么时候用watch 比较合适?
当多个属性影响一个属性的时候,建议用computed
当一个值发生变化之后,会引起一系列的操作,这种情况就适合用watch
例如:computed 购物车需要全部都选完之后我才知道总金额(多个属性影响一个属性)
例如:watch 只有我购物车付款之后,我每个订单才能发货(一个值发生变化之后,会引起一系列的操作)