看到这个标题，我们就知道本文接下来的内容了。当我们使用vue时，必须经常使用三个特性，方法，watch和computed，因为它们非常有用，但是如果不彻底了解它们的差异和使用场景，就很难很好地利用它们。希望下面的介绍能回答你的问题。

计算

让我们首先看看计算属性：computed。我们只要看名字就知道它是干什么用的。当然计算属性是用来计算的，但是是怎么计算的呢？计算属性有两个显著的特征：

计算属性所基于的属性必须是响应依赖项，否则将不会执行计算属性。计算属性是基于依赖关系缓存的，也就是说，如果依赖关系没有更新，调用计算属性就不会被重新计算，这样可以减少开销。让我们举一个相关的例子：

div id=' app ' div { { arr . join(')} }/div div { { arr 1 } }/div div { { GetDate } }/div div { { GetDate 1 } }/div/div var app=new Vue({ El : ' # app }，data: { date: ' '，arr: ['a '，' b '，' c'] }，computed : { GetDate(){ return date . now()}，GetDate 1(){ 0由…改编join(“”)}，created () {setinterval ()={this。日期=日期。now ()}，1000)})看上面的例子，我们写vue的时候，经常会遇到操纵数据值的情况。为了方便起见，总有人会直接在模板中计算数据的值，就像我在上面的例子中写的那样，在模板中将数组转换为字符串。这样写有什么问题吗？语法没有问题，但是如果模板中使用了太多的计算，维护就会出现问题，人们看代码会非常痛苦。这种写法就像是把js的逻辑操作插入到html中，可维护性极差。另一个问题是计算的响应依赖性。当我们调用getDate时，返回的Date.now()返回一个无响应的依赖项，因此getDate返回的值不会改变。

应用场景

看完computed的特点，它的应用场景是什么？个人观点，但不限于以下场景：

对于复杂的渲染数据计算，使用computed计算属性可以减少一定的计算开销，增加可维护性，并从Vuex Store收集相关信息。在Vuex中计算数据时，要特别注意computed的缓存属性。在Vuex中修改对象值的属性时，不会触发计算出的中值的变化。此时，需要Object.assign({}，obj)来检查依赖关系，并用新对象创建新表单。这种应用场景应该是比较常见的。正则表达式用于实时监控每个表单项，以判断表单是否可以提交方法

每个人都应该使用方法。它是vue中的一个方法属性，所有的方法调用都会写在这里。它们中的大部分都用于像@click这样的事件调用，但是很多人忽略了方法的另一种用法，即在模板中使用方法。让我们举一个例子：

div id='app' div v-for='(item，idx)在arr ' { matching(item)} }/div/div var app=new Vue({ El : ' # app }，data: { arr: ['a '，' b '，' c']，obj: {a: 'hello '，b: 'world'}，methods : { matching(key){ if(this . obj[key]){ return this . obj . obj。

上面的例子是模板中经常使用方法的场景。当模板中某个循环的值需要进行逻辑运算时，可以使用方法传入相应的值，然后计算结果并返回模板进行显示。此时，它不能用计算实现，也不能在计算中传递参数。除了方法和计算方法之间的差异之外，方法中的计算不会被缓存，也就是说，它将被计算任意多次，这比计算更昂贵。

看

listening属性专门用于观察和响应vue实例上的数据变化。计算属性基本上可以用在可以使用watch属性的场景中，计算属性开销小，性能高。因此，如果可以使用计算属性，那么手表属性就没有用了？执行异步操作时，您可能必须使用watch而不是computed。这里有一个例子：

div id=' app ' div { { obj 1 . a } }/div/div var app=new Vue({ El : ' # app }，data : { obj : { a : ' hello ' }，obj1: {a: 'hello'}，test: 'aaa' }，computed 3: { getObj(){ setTimeout(()={ this . obj . a=this . test ' word ' return this但是，如果添加了异步操作，将在没有返回值的情况下调用对象的属性，并将报告错误。然而，调用obj1.a是不同的。模板将首先显示hello，然后当watch属性被触发时，setTimeout将被触发，一秒钟后，模板将显示helloword，这就是为什么异步函数可以在watch中使用，但计算函数不能工作。

摘要

我希望阅读这篇文章能帮助你区分方法的用法，计算的和观察的。

本文如有错误或不准确之处，欢迎批评指正。如果你喜欢，欢迎你喜欢