Vue中computed和methods的区别

我们简单的用个案列来解释computed和methods的区别吧

我们先看methods中定义的方法显示

这里我们定义一个first方法，输出调用4次在页面中并console.log(this.method)

可以看到也调用并且打印了四次

下面是使用computed同样将data中的数据放入页面中

  <div id="app">
        <p>{{two}}</p>
        <p>{{two}}</p>
        <p>{{two}}</p>
        <p>{{two}}</p>
        <p>{{two}}</p>        
  </div>

    computed: {
            two() {
                console.log(this.comput)
                return this.comput
            }
        },

下面打印结果

但是我们看到用computed页面显示调用了四次，console只有一次

总结

使用computed计算属性为two()方法做了缓存，观察我们return的结果是否改变，如果改变了才return结果才会发生变化。
而在methods使用first()方法，输出打印了四次结果，相对于比较消耗性能。
所以再一定情况下使用computed计算属性更加合理

p:computed计算属性中的原始写法中的 set get就不细说了