Vue中computed和watch的区别(vue中computed和watch区别)

Vue中computed和watch的区别

推荐整理分享Vue中computed和watch的区别(vue中computed和watch区别)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue computed和watch,vuecomputed和method,vuecomputed和method,vue的computed和methods,vue中computed和watch区别,vue中computed和methods区别,vue中computed和method区别,vue中computed和methods区别,内容如对您有帮助，希望把文章链接给更多的朋友！

今天简单说一下computed和watch的区别。 先看代码，两者怎么实现的。

<div id="app"> <input type="text" v-model="firstName"><br> <input type="text" v-model="lastName"><br> <h2>{{fullName()}}</h2> </div><script> var app = new Vue({ el: '#app', data: { firstName: '张', lastName: '三', fullName: '张三' }, // watch 监视、监听，在此处定义监听器 // 作用：监视data中的数据变化 watch: { // 侦听器以函数的形式定义，函数名称就是监视的数据的名称，参数就是数据变化后的新值 firstName(val) { console.log(val); this.fullName = val + this.lastName; }, lastName(val) { console.log(val); this.fullName = this.firstName + val; } } }) //计算属性方式实现 var app = new Vue({ el: '#app', data: { firstName: '张', lastName: '三', }, computed: { // 计算属性在某些场景下（此示例），要比侦听器代码精简。 fullName() { return this.firstName + this.lastName; } } })</script>

computed和watch的区别 1、computed是计算属性；watch是监听，监听data中的数据变化。 2、computed支持缓存，当其依赖的属性的值发生变化时，计算属性会重新计算，反之，则使用缓存中的属性值；watch不支持缓存，当对应属性发生变化的时候，响应执行。 3、computed不支持异步，有异步操作时无法监听数据变化；watch支持异步操作。 4、computed第一次加载时就监听；watch默认第一次加载时不监听。

immediate 组件创建时刻执行与否 immediate: true,第一次加载时监听（默认为false）deep 深度监听 不推荐使用(非常的消耗性能) 监听的属性是对象的话 不开启deep 对象子属性变化不会触发watch 开启了deep 对象内部所有子属性变化 都会触发watch

5、computed中的函数必须调用return；watch不是。 6、使用场景： computed：一个属性受到多个属性影响，如：购物车商品结算。 watch：一个数据影响多条数据，如：搜索数据。 数据变化响应，执行异步操作，或高性能消耗的操作，watch为最佳选择。