computed与watch在Vue中有什么不同？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
成都创新互联公司长期为上1000+客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为金城江企业提供专业的网站设计制作、
成都网站设计，
金城江网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。
计算属性computed：
支持缓存，只有依赖数据发生改变，才会重新进行计算
不支持异步，当computed内有异步操作时无效，无法监听数据的变化
computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。
var vm = new Vue({
el: '#app',
data: {
message: 'hello'
},
template: `
我是原始值: "{{ message }}"
我是计算属性的值: "{{ computedMessage}}"
// computed 在 DOM 里直接使用不需要调用
`,
computed: {
// 计算属性的 getter computedMessage: function () {
// `this` 指向 vm 实例 return this.message.split('').reverse().join('')
}
}
})结果：
我是原始值: "Hello"
我是计算属性的值: "olleH"
如果不使用计算属性，那么 message.split('').reverse().join('') 就会直接写到 template 里，那么在模版中放入太多声明式的逻辑会让模板本身过重，尤其当在页面中使用大量复杂的逻辑表达式处理数据时，会对页面的可维护性造成很大的影响
而且计算属性如果依赖不变的话，它就会变成缓存，computed 的值就不会重新计算
所以，如果数据要通过复杂逻辑来得出结果，那么就推荐使用计算属性
侦听属性watch
不支持缓存，数据变，直接会触发相应的操作。
watch支持异步；监听的函数接收两个参数，第一个参数是新的值；第二个参数是输入之前的值；
当一个属性发生变化时，需要执行对应的操作；一对多；
监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数：
new Vue({
data: {
n: 0,
obj: {
a: "a"
}
},
template: `
n+1 obj.a + 'hi' obj = 新对象
`,
watch: {
n() {
console.log("n 变了");
},
obj:{
handler: function (val, oldVal) {
console.log("obj 变了")
},
deep: true // 该属性设定在任何被侦听的对象的 property 改变时都要执行 handler 的回调，不论其被嵌套多深 },
"obj.a":{
handler: function (val, oldVal) {
console.log("obj.a 变了")
},
immediate: true // 该属性设定该回调将会在侦听开始之后被立即调用 }
}
}).$mount("#app");不应该使用箭头函数来定义 watcher 函数，因为箭头函数没有 this，它的 this 会继承它的父级函数，但是它的父级函数是 window，导致箭头函数的 this 指向 window，而不是 Vue 实例
vm.$watch() 的用法和 watch 回调类似
vm.$watch("n", function(val, newVal){
console.log("n 变了");
},{deep: true, immediate: true})总结
关于computed与watch在Vue中有什么不同问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。
网页名称：computed与watch在Vue中有什么不同-创新互联
文章源于：
http://cdkjz.cn/article/dcojoj.html
