Vue之计算属性（computed）

计算属性是Vue中一个非常有用的功能，它允许你定义一个依赖于其他数据的复杂表达式，并且这个表达式会被缓存起来，只在相关依赖发生改变时才重新计算。

以下是一些使用Vue计算属性的示例：

1. 基本的计算属性：

new Vue({
  el: '#app',
  data: {
    message: 'Hello',
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('');
    }
  }
})

在这个例子中，reversedMessage是一个计算属性，它的值是message的反转。

2. 计算属性的setter和getter：

new Vue({
  el: '#app',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: {
      // getter
      get: function () {
        return this.firstName + ' ' + this.lastName
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  }
})

在这个例子中，fullName是一个计算属性，它同时有一个getter和setter。当你尝试读取fullName的时候，它会返回firstName和lastName的结合。当你尝试写入fullName的时候，它会把新值分割并分别赋值给firstName和lastName。

3. 计算属性的缓存：

new Vue({
  el: '#app',
  data: {
    num: 1
  },
  computed: {
    computedNum: function () {
      console.log('computed');
      return this.num * 2;
    }
  }
})

在这个例子中，每次更改num，computedNum都会重新计算，但是只有当num改变时，computedNum才会重新计算。这就是计算属性的缓存。

4. 计算属性的依赖性跟踪：

new Vue({
  el: '#app',
  data: {
    num: 1,
    double: 2
  },
  computed: {
    computedNum: function () {
      return this.num * this.double;
    }
  }
})

在这个例子中，computedNum的值依赖于num和double。当num或double改变时，computedNum会自动重新计算。这就是计算属性的依赖性跟踪。

以上就是Vue计算属性的一些基本用法和示例。