vue計算プロパティ、リスニング(リスナー)、フィルタ、配列応答操作

3349 ワード
先端
watch(リスナー)watchメソッドは、属性の変化をリアルタイムで傍受し、属性の値を変更します.watchにはキャッシュがあり、リスニングされたデータが変化しない場合は、キャッシュ内の値を直接取得します.
例:
//  val            
watch:{
	   ：function(val){
		    
	}
}

computed計算プロパティは、通常、1つのプロパティの処理が複雑な場合に計算プロパティを使用できます.computed計算プロパティにはキャッシュがあり、元のプロパティデータが変化していない場合、計算プロパティはgetメソッドを呼び出して取得するのではなく、キャッシュ内の値を直接使用し、変化が発生した場合、新しい値が計算されます.
例:
computed: {
    //     ，                   ，                  
    reversedMessage: function () {
      // `this`    vm   
      return this.message.split('').reverse().join('')
    }
  }
})

計算プロパティの使用
{{reversedMessage}}

メッセージの値が変化しない限り,{{reversedMessage}}を用いて属性を計算し,計算属性のメソッドを再び呼び出すことなく,その値をキャッシュから直接取り出す.メッセージの値が変更された場合、reversedMessageを使用して属性を計算した場所で自動的に値が更新されます.
実は計算属性には一般的にgetとsetの2つの部分があり、書かないとデフォルトを呼び出します.例:
reversedMessage: {
  //   reversedMessage ，     get  
  get:function(){
     return this.message.split('').reverse().join('');
  },
  //  reversedMessage   ，     set  
  //    this.reversedMessage= 'Wei,linlin';
  set:function(newStr){
 	this.reversedMessage=newStr;
  }
}

計算アトリビュート適用シーンアトリビュートを一定の処理を行い、表示する場合は、アトリビュートの値の変化をリアルタイムで更新します.
filterカスタムフィルタは、データを処理するために使用できます.グローバルなfilterを定義したり、ローカルを定義したりできます.
例:時間フォーマット変換
例://パラメータなし
Vue.filter("     "，function(val){
		    
	}
)


//    
{msg  |       }

//パラメータ付
Vue.filter("     "，function(val,args){
		    
	}
)

//    
{msg  |       (  )}

配列応答式操作は配列内部の属性または要素を直接操作し、配列のデータは変化したが、コンポーネントは更新されない.解決方法:1、データの変異方法.
push()          ，            ，           
pop()            ，     length ，        
shift()                ，        1
unshift()                    
splice()            ，                   
sort()         toString()  ，            ，           
reverse()          ，

2、Vueまたはvmを使用して配列を直接操作します.例:
   
vm.$set(vm.items,indexOfItems,newValue)

   
Vue.$set(vm.items,indexOfItems,newValue)

3、上記で説明した計算属性と傍受属性を使用してもよい
注意:1、計算プロパティ、リスナーは、データの変化をリスニングし、データを更新してコンポーネントを更新する効果を果たすことができます.2、計算プロパティとListenerの両方にキャッシュがあります.3.Listenerは単一のプロパティのみをリスニングできますが、計算プロパティのメソッドボディでは複数のプロパティに依存できます.
DataGridView行、列の非表示と削除
vueに適したpdfプレビューコンポーネントライブラリ