首页常见问题正文

Vue中computed 和watch 的区别是什么？

更新时间:2023年09月19日11时59分来源:传智教育浏览次数:

computed计算属性就是为了简化template里面模版字符串的计算复杂度、防止模版太过冗余。它具有缓存特性。

omputed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理;

watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象，一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据，它不具有缓存性。

watch：监测的是属性值，只要属性值发生变化，其都会触发执行回调函数来执行一系列操作。

computed：监测的是依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才会重新计算。

除此之外，有点很重要的区别是：计算属性不能执行异步任务，计算属性必须同步执行。也就是说计算属性不能向服务器请求或者执行异步任务。如果遇到异步任务，就交给侦听属性。watch也可以检测 computed属性。

最新资讯