Vue教程08：Computed計算屬性、Watch監聽屬性

閱讀更多系列文章請訪問個人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>
複製代碼