Vue 中 filters，computed， methods， watch 的總結

computed

做用：計算屬性，根據現有的值生成一個新的屬性值，並用return返回新的屬性值。
eg: 計算總價

<div>{{totalPrice}}</div>
 <div>{{totalPrice}}</div>
 computed: {
    totalPrice () {
        console.log('computed屬性實現計算總價')
        return this.price * this.total
    }
 }

（1）計算屬性將被混入到 Vue 實例中， 即this 上下文自動地綁定爲 Vue 實例，可是計算屬性使用了箭頭函數，則 this 不會指向這個組件的實例。
（2）計算後的屬性不須要在data中定義。
（3）computed屬性有依賴緩存，若computed綁定的方法中任意變量改變，該方法纔會被從新調用，上例中，頁面屢次調用totalPrice，但在控制檯中只顯示一次 'computed屬性實現計算總價'。
（4）computed不接受傳參，數據都是從data中獲取。
場景：須要生成一個新的屬性時或者複雜的邏輯計算。

filters

做用：過濾器，至關於把數據進行格式化。好比時間戳格式
eg: 在價格的前面加上人民幣￥

<div>{{ price | priceFormat }}</div>

js: 
filters： {
   priceFormat (val){
    return  `￥${val}`
   }
}

（1）須要傳參和返回值
場景：文本格式。

watch

做用： 監聽屬性，監聽data屬性中的數據，當數據發生變化時，自動執行函數。
eg: 城市聯動

watch: {
    curProvs () {
        //獲取相應城市...
    }
 }

（1) watch回調函數不能夠使用箭頭函數，由於箭頭函數綁定了父級做用域的上下文，因此this 不是指向 Vue 實例。
（2）監聽的屬性須要在data中定義。

場景：數據改變時，執行異步操做或開銷較大的操做，發請求或者監聽路由進行相應操做。

methods

methods中存放的是內部方法、事件的回調。

（1）methods 將被混入到 Vue 實例中。能夠直接經過 VM 實例訪問這些方法，或者在指令表達式中使用。注意在methods中不要使用箭頭函數，由於箭頭函數綁定了父級做用域的上下文。
（2）只要發生從新渲染，methods調用總會執行該函數
（3）methods 是函數調用，computed,filters是屬性調用。

場景：每次確實須要從新加載，不須要緩存時用methods。