Vue的computed和watch的使用和区别
一、computed：
模板内表达式非常便利，可用于简单计算，当模板内放入太多的逻辑时，模板会过重且难以维护；可以使用computed替代
计算属性是基于它们的响应式依赖进行缓存的，当依赖的响应式数据发生改变时，计算属性才会改变；
如果时非响应式（未在data中声明）数据，计算属性是不会发生改变的；
计算属性将被混入到vue实例中，所有的getter和setter的this上下文自动绑定到vue实例中
// 计算属性 VS 方法
// html
<div>{{ msg }}</div> // 计算属性
<div>{{ res() }}</div> // 方法
// js
const vm = new Vue({
el: '#app',
data: {
name: 'zs'
}，
// 计算属性
computed：{
msg: {
get() : {
return this.name
},
set(val): {
// val 是修改msg时触发并赋值的最新值
}
}
},
// 方法
method: {
res(): {
return this.name
// 方法和计算属性效果一样，不同的是计算属性有缓存，方法是每次触发都要进行一次调用，计算属性是只有响应式依赖改变了才会触发
}
}
})二、watch 侦听器
相对于侦听器，大多数情况下使用computed，但有时也需要一个自定义的侦听器watch，场景： 当数据在数据变化时，执行异步或者开销比较大的操作时，使用侦听器
const vm = new Vue({
el: '#app',
data: {
question: 'old-Q'
},
watch: {
// 如果question发生改变，则这个函数就会触发
question: function(newQuestion, oldQuestion){
// newQuestion是question改变后的新值
// oldQuestion是question改变之前的值
}
}
})
// watch是侦听一个参数，当这个参数发生变化时影响其他数据的变化，并且可以获得该参数的新值和旧值进行相应的计算官方文档： https://cn.vuejs.org/v2/guide/computed.html
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！