vue2中的computed用法示例

在Vue 2中，`computed`属性是一种特殊类型的属性，它的值会基于其他“依赖”属性（通常是其他`data`属性）的变化而自动更新。`computed`的主要用法是在背后执行一些复杂的数据计算，而不需要开发者直接操作`data`。

以下是一个简单的`computed`用法示例：

new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe',
    fullName: null
  },
  computed: {
    // 使用计算属性来组合firstName和lastName
    fullName: function() {
      return this.firstName + ' ' + this.lastName;
    }
  },
  methods: {
    changeName: function() {
      this.firstName = 'Jane';
      this.lastName = 'Smith'; // 这将自动更新fullName
    }
  }
}).$mount('#app');

// 当改变firstName或lastName时，fullName将会自动更新，无需手动调用这个方法
this.changeName(); // 输出：'Jane Smith'

在这个例子中，当我们调用`changeName`方法，`firstName`和`lastName`的更改会导致`fullName`的计算结果也自动更新，因为我们已经把`fullName`绑定了到`firstName`和`lastName`上。