vue 計算屬性

下例中，getName方法呼叫可以起到與使用計算屬性name相同的作用

new Vue({
  el: '#root',
  template: `<div>
  <div>Name: {{name}}</div>
  <div>Name: {{getName()}}</div>
  <div>Number: {{number}}</div>
  <div><input v-model="number" /></div>
  </div>`,
  data () {
    return
 
 {
      fisrtName: 'hello',
      lastName: 'world',
      number: 0
    }
  },
  computed: {
    name () {
      console.log('new name')
      return `${this.fisrtName} ${this.lastName}`
    }
  },
  methods: {
    getName () {
      console.log('get name')
      return `${this.fisrtName} ${this.lastName}`
    }
  }
})
 

使用雙向繫結，當input框更改number時，getName方法也會重新呼叫，而computed中的name方法則不會，由於更改number值使元件更新，導致getName方法重新執行。
當computed中的name方法的監聽的firstName與lastName值發生改變時，name方法會重新呼叫，當即會做快取起來，當改變number值時，name方法依舊不會執行。