watch、computed、set、delete、filters

　　

一、watch監聽

　　方法：

　　　　action(nv, ov){

　　　　　　this.msg = nv

　　　　}

　　監聽的幾種方法

　　　　name: function(nv, ov){

　　　　　　this.msg = nv

　　　　}

　　　　name(nv, ov){

　　　　　　this.msg = nv

　　　　}

　　　　'name'(nv, ov){

　　　　　　this.msg = nv

　　　　}

　　　　'name': 'action'

　　　　obj: {

　　　　　　handler(nv, ov){

　　　　　　　　this.msg = nv

　　　　　　},

　　　　　　deep: true　　// 深度監聽，值爲false時，對象中的屬性值變化，不會執行handler方法

　　　　}

 

二、計算屬性

　　計算屬性中使用data中的數據一旦有變化，計算屬性就會更新

　　total( ){

　　　　if(this.shop.count > 5){

　　　　　　return  this.shop.price  *  this.shop.count

　　　　}else{

　　　　　　return this.shop.price  *  this.shop.count  +  5

　　　　}

　　}

　　計算屬性傳參數

　　num( ){

　　　　return  function(i){

　　　　　　return  this.num.toFixed(i)

　　　　}

　　}

三、$set、$delete

　　{{obj.age}}

　　obj: {id:1, name: 'xx'}

　　add(){

　　　　this.obj.age  =  18　　// 不會觸發視圖更新

　　　　this.$set(this.obj, 'age', 18)　　// 會觸發視圖更新

　　　　delete  this.obj.name　　// 不會觸發視圖更新

　　　　this.$delete(this.obj, 'name')　　// 會觸發視圖更新

　　}

四、過濾器

　　文本格式化，能夠在表達式{{ }}和v-bind中使用

　　{{3.1415926 | number}}

　　{{3.1415926 | num(2)}}

　　filters: {

　　　　number(data){

　　　　　　return  data.toFixed(2)

　　　　},

　　　　num(data,n){

　　　　　　return  data.toFixed(n)

　　　　}

　　}

 

計算屬性和watch監聽的區別

　　watch監聽：監聽具體的屬性或對象，當監聽的對象發生變化，執行對應的函數

　　computer計算屬性：函數中所用到data中的數據發生變化，都會執行對應函數

 

計算屬性和方法的區別

　　計算屬性有緩存，屢次用到同一個計算屬性，計算屬性只會執行一次

　　方法沒有緩存，屢次用到同一個方法，方法會執行屢次