Vue教程08：Computed计算属性、Watch监听属性

[chencl1986]

阅读更多系列文章请访问我的GitHub博客，示例代码请访问这里。

Computed计算属性

代码示例：/lesson08/01. Computed计算属性.html

计算属性类似于方法，用于输出数据的计算结果，在数据变化时，它会同步更新，计算属性不可与data中的属性重名。
相对于方法，它的优势是当它的依赖变化时，才会重新进行计算，也就是说它拥有缓存，而方法在每次render的时候都会计算，因此computed的性能较高。

计算属性除了设置为方法外，还可以用作对象，通过get、set方法进行读写操作。

计算属性还可以当做普通属性使用，通过v-model绑定在input上，而方法无法做到。

JavaScript：

let vm = new Vue({
  el: '#app',
  data: {
    a: 12,
    b: 33,
    familyName: '张',
    name: '三'
  },
  computed: {
    sum() {
      return this.a + this.b
    },
    fullName: {
      get() {
        return this.familyName + this.name
      },
      set(value) {
        this.familyName = value[0]
        this.name = value.substring(1)
      },
    }
  },
})

HTML：

<div id="app">
  <div>
    {{a}} + {{b}} = {{sum}}
    姓：<input type="text" v-model="familyName">
    名：<input type="text" v-model="name">
    姓名：<input type="text" v-model="fullName">
  </div>
</div>

Watch监听属性

代码示例：/lesson08/02. Watch监听属性.html

Watch监听属性可以监听数据的变化，不止可以监听某个变量，还可以监听对象中的属性，数组中的item。

let vm = new Vue({
  el: '#app',
  data: {
    name: 'lee',
    userInfo: {
      name: 'lee',
      age: 18
    },
    users: [
      'lee',
      'chen',
      'john'
    ]
  },
  watch: {
    name(value) {
      console.log(`name改变为${value}`)
    },
    // userInfo的属性修改不会触发该监听
    userInfo(value) {
      console.log('userInfo已改变', value)
    },
    // 可以监听对象的属性变化
    'userInfo.name': function(value) {
      console.log(`userInfo.name改变为${value}`)
    },
    // 可以监听数组中的某一项
    'users.1': function (value) {
      console.log(`users[1]改变为${value}`)
    },
    // 修改users[1]的值同时也会触发对数组的监听
    users(value) {
      console.log(`users改变为${value}`)
    },
  }
})

HTML：

<div id="app">
  <div>
    <input type="text" v-model="name">
    <input type="text" v-model="userInfo.name">
    <input type="text" v-model="users[1]">
  </div>
</div>