computed methods watch filters

computed(計算屬性)

　　　　計算屬性該屬性裏面的方法必須要有return返回值，這個返回值就是（value值）。

　　　　有幾個關鍵點

• 1) 計算後屬性不需要在data中重複定義
• 2) 計算後屬性必須渲染後，綁定的方法纔會生效這裏指就是定義後的變量名在上面html中顯示
• 3) 計算後屬性綁定的方法中的任意變量值更新，方法都會被調用比如說方法中一個變量A,變量A變了函數會重新調用
• 4) 計算後屬性爲只讀屬性(不可寫)計算後屬性爲只讀屬性
• 5) 屬性的結果會被緩存, 除非依賴的響應式屬性變化纔會重新計算, 主要 當做屬性來使用;(雖然是個方法,但是當做屬性使用)(場景:引用一些經過操作的數據)

1 computed: {
2     function () {
3         return this.firstName + this.lastName
4 
5     }
6 }

 

methods(方法)

　　　　表示一個具體的操作, 主要寫 業務邏輯;(場景:方法的調用)

　　　　methods屬性裏面的方法會在數據發生變化的時候你，只要引用了此裏面分方法，方法就會自動執行。這個屬性沒有依賴緩存

watch(監聽器)

　　　　這個監聽的是data屬性裏面的數據，當這個數據發生變化時，將自動執行這個函數。

　　　　主要用來 監聽某些特定數據的變化,從而進行某些業務邏輯的操作; 可以看做是computed和methods的結合體;(場景:監聽路由地址)

注意點

• • 1) 監聽綁定的屬性，該屬性可以get、set
  • 2) 監聽的屬性一旦發生值更新，綁定的方法就會被調用
  • 3) 監聽的屬性是已定於的屬性必須在data中定義

1 watch: {
2     firstName: function (val) {
3         this.fullName = val + ' ' + this.lastName
4     },
5     lastName: function (val) {
6         this.fullName = this.firstName + ' ' + val
7     }
8 
9 }

 filter（過濾器）

內容格式化，將輸入的數據，按照某種規則進行輸出，從這一層講，感覺叫 formatter 可能更合適；

與methods中定義的一個方法使用方法差不多