Vue中computed和watch有哪些区别

计算属性computed： 支持缓存，只有依赖数据发生改变，才会重新进行计算 不支持异步，当computed内有异步操作时无效，无法监听数据的变化 computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed 如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

var vm = new Vue({ el: ’#app’, data: { message: ’hello’ }, template: ` <div> <p>我是原始值: '{{ message }}'</p> <p>我是计算属性的值: '{{ computedMessage}}'</p> // computed 在 DOM 里直接使用不需要调用 </div> `, 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: ` <div> <button @click='n += 1'>n+1</button> <button @click='obj.a += ’hi’'>obj.a + ’hi’</button> <button @click='obj = {a:’a’}'>obj = 新对象</button> </div> `, 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 实例

deep 控制是否要看这个对象里面的属性变化 immediate 控制是否在第一次渲染是执行这个函数

vm.$watch() 的用法和 watch 回调类似

vm.$watch(’data属性名’, fn, {deep: .., immediate: ..})

vm.$watch('n', function(val, newVal){ console.log('n 变了');},{deep: true, immediate: true})总结 如果一个数据需要经过复杂计算就用 computed 如果一个数据需要被监听并且对数据做一些操作就用 watch

以上就是Vue中computed和watch有哪些区别的详细内容，更多关于Vue中computed和watch的区别的资料请关注好吧啦网其它相关文章！