vue裏的watch和computed

vue裏的watch和computed

vue裏的computed是什麼？
首先咱們明確computed的一個基本的定義
computed是用來監視本身定義的變量的
它不在在data裏面聲明(像普通變量同樣)而是直接在computed裏面進行定義

那麼vue裏的watch和computed都是以vue的依賴追蹤機制爲基礎的
它們的任務：當某一個數據（咱們設定的監控的依賴數據）發生改變的時候，全部依賴這個數據的數據都會相應產生改變，而且是自動變化，這就是watch和computed的任務，而且也是他們和methods的區別，由於methods是用來定義函數的，它是須要手動調用的

import Vue from 'vue'
new Vue({
  el: '#root',
  template: `
    <div>
      <p>Name: {{name}}</p>
      <p>Name: {{getName()}}</p>
      <p>Number: {{number}}</p>
      <p><input type="text" v-model="number"/></p>
      <p>FirsName: <input type="text" v-model="firstName"/></p>
      <p>LaseName: <input type="text" v-model="lastName"/></p>
    </div>
  `,
  data: {
    firstName: 'Jokcy',
    lastName: 'Lou',
    number: 0
  },
  computed: {
    name () {
      console.log('new name')
      return `${this.firstName} ${this.lastName}`
    }
  },
  methods: {
    getName () {
      console.log('getName invoked')
      return `${this.firstName} ${this.lastName}`
    }
  }
})

當咱們改變 number 時，整個應用會從新渲染，vue 會被數據從新渲染到 dom 中。這時，若是咱們使用 getName 方法，隨着渲染，方法也會被調用，而 computed 不會從新進行計算，從而性能開銷比較小。當新的值須要大量計算才能獲得，緩存的意義就很是大。
若是 computed 所依賴的數據發生改變時，計算屬性纔會從新計算，並進行緩存；當改變其餘數據時，computed 屬性 並不會從新計算，從而提高性能。
當咱們拿到的值須要進行必定處理使用時，就可使用 computed。

watch和computed的區別

watch是監聽某個數據的變量，傾向於監聽完它後調用哪一個函數，一個數據影響多個其餘函數的調用
而computed傾向於計算後返回一個數據
而且data中能夠不聲明你要computed的被監視值，可是必須聲明你要watch的東西
而咱們多數用computed來處理使用watch和methods時沒法處理的數據