[Vue] 模板語法 2/2

計算屬性(computed)

index.html

<div>Reverse Title: {{reverseTitle}}</div>

index.js

Vue({

  data: {

      title: 'Test'

  },

  computed: {

    // 自定義屬性

        reverseTitle: function () {

            return this.title.split('').reverse().join('')

        }

  }

})

計算屬性 v.s. 方法

  methods: {

        reverseTitle: function () {

            return this.title.split('').reverse().join('')

        }

  }

和

  computed: {

    // 自定義屬性

        reverseTitle: function () {

            return this.title.split('').reverse().join('')

        }

  }

• methods 每次渲染都會更新，保持最新的值，但使用較多資源
• computed 會緩存，不一定是最新的值，使用較少資源

source code

計算屬性結合 getter / setter

data: {

    firstName: 'Shawn',

    lastName: 'Tseng'

},

computed: {

        fullName: {

            get: function () {

                return this.firstName + ' ' + this.lastName

            },

            set: function (newValue) {

                var name = newValue.split(' ');

                this.firstName = name[0];

                this.lastName = name[name.length - 1];

            }

        }

}

• 在 fullName 更新時，也會觸發 set ，更新 firstName 和 lastName

source code

監聽器(watch)

  data: {

    age: '',

    reply: '',

  },

  watch: {

      age: function (oldValue) {

        this.reply = '你的年紀:' + oldValue;

      }

  }

• 在age變動時，會執行watch的邏輯，非常消耗資源
• 在需要串接後端的情境常使用

source code