Vue基础自考——watch、computed和methods的区别

时间：2023-03-31 16:33:09 vue.js

1前言创建Vue实例时，可以传入一个option对象constvm=newVue({data:{msg:'hello'},computed:{},methods:{},watch:{}})这个选项对象可以指定很多选项（或属性），数据相关的选项包括：包括但不限于data、methods、computed、watch等.methods、computed和watch都可以通过函数处理或响应数据。三者有区别，但很容易混淆。2基本用法使用脚本引入vue.js，在下面html中运行以下代码方法2.1方法中的在methods选项中定义的函数称为方法。在Vue实例化过程中，methods对象中的方法会被混入到Vue实例中，成为Vue实例的一个方法。这些方法可以直接通过Vue实例访问

a:{{plus()}}

需要主动调用方法中的函数执行，a的值不能改变

a:{{plus()}}

在页面a>后续更新2.2computed计算属性在computed选项中定义的函数称为计算属性。在Vue实例化过程中，计算对象中的计算属性会混入到Vue实例中，成为Vue实例的同名属性。

a:{{plus}}

乍一看好像computed和methods一样功能，确实在这个例子中两者的显示效果是一样的。其实两者的区别已经通过打印vm实例和访问方法体现出来了：methods中的函数会成为vm的方法，computed中的函数计算后会成为vm的同名属性，而属性值是函数的计算结果，也就是返回值另外，与方法不同的是，计算属性可以随着它所依赖的数据发生变化而响应式更新，也就是当a发生变化时，加上属性也会更新2.3watchlistener在watch选项中键值对称为监听器或监听属性/listeningattribute。key是需要观察的表达式，value是对应的回调函数（value也可以是其他形式，这里不展开）。在Vue实例化的过程中，会记录这些需要监控的变量。当这些变量发生变化时，就会执行相应的回调函数。

a:{{a}}

3三3.1MethodVSComputedproperty的区别除了2.2中已经提到的两点之外，还有一个最重要的区别：Computedproperties是根据其响应依赖进行缓存的，即当上面的a发生变化时，会重新触发求值函数，否则多次调用会从缓存中求值。这对于昂贵的计算非常有用，避免重复计算的方法是调用时总是重新执行。两者的区别总结一下：methodscomputedVue实例化后变成vm实例什么变成vm实例上的方法变成vm实例上的属性能不能根据依赖数据响应式更新不能，需要主动调用方法可以它被缓存了没有，每次都会重新执行函数，依赖的数据不变，会从缓存中取值同名的方法和计算属性可以任意命名。其次，listener不能主动访问，而另外两个可以主动访问computedproperty和listener的使用场景：如果一个值需要通过一个或多个data来计算，主要是使用computedproperties来监听properties监听某个值的变化，然后进行需要的逻辑处理；另外，当数据变化时需要执行异步或者开销大的操作时，监听属性就比较有用，具体例子可见vue文档-监听器公众号【前端】