vue2 computed 如何使用

Vue2中的computed属性用于定义一个计算属性，它会根据依赖的数据进行计算，并返回计算结果。computed属性具有缓存性，只有当依赖的数据发生改变时，才会重新计算。

下面是一个使用computed属性的示例代码：

<div id="demo">
  {{ color }}
  <button @click="onClick">点击我改变数据</button>
</div>

new Vue({
  el: '#demo',
  data: {
    foo: 1,
    foo1: 3
  },
  methods: {
    onClick() {
      this.foo = 5;
    }
  },
  computed: {
    color() {
      return this.foo + this.foo1;
    }
  }
});

在上面的示例中，我们定义了一个计算属性color，它依赖于data中的foo和foo1。当点击按钮时，调用onClick方法改变foo的值，此时color会重新计算并更新页面上的显示。