VUE:計算され、時計の違い

VUE:計算され、時計の違い

関係は計算され、見ての方法

1.watch計算され、追跡メカニズムに依存しているVUEのベースとなって、一つのことに対処しようとしている:データ(すなわち、データ依存の)変更は、すべての「関連のデータに依存する場合は、データ「Autoです「変更は、関連する機能は、自動的にデータの変更を達成するために呼び出されます。

方法2.:定義された関数の方法は、機能呼び出しを手動にする必要があり、ない「オートラン」時計や計算などの事前定義された関数として実行することは明らかです。

データが計算され、それらの関係のシナリオは、異なるプロセスを見て:

1.watch処理シナリオがある:データのデータ効果の複数

2.computed処理シナリオがある:データ・効果によって複数のデータ

のみ一致する依存データ依存データの存在変化 計算、これら2つの条件が、再計算されます。

コード説明:

時計の使い方:

// haiZeiTuan_Nameは(名前の海賊)が変更されると、時計には、
  //データオプションすべての乗組員は、自動的に(suoLong、naMei、xiangJiShi)の名前を変更し、それらを出力します
 
// 秒)名前データの乗組員- -複数のデータの全てが変化> --->()データ名データ海賊変更- >に依存
{:データを
    haiZeiTuan_Name:「わら帽子海賊」
    suoLong:「ソロンわら帽子海賊」 、(haiZeiTuan_Name + 海賊名)
    namei: '麦わらの海賊ナミ' 
    xiangJiShi: 'Xiangjishiわら帽子海賊' 
}、
時計:{ 
    haiZeiTuan_Name:関数(NEWNAME){
       この .suoLong NEWNAME + =」ケーブルロング'
       この .naMei NEWNAME + ='ナミ
       この .xiangJiShi NEWNAME + = 'サンキスト」
      console.log(この.suoLong)
      はconsole.log(この.naMei)
      はconsole.log(この.xiangJiShi)
    } 
 } 
// 変更オプションの腕時計モニタメインデータ 
vm.haiZeiTuan_Name = 'ゴム海賊
結果:this.suoLongになります「ソロンゴム海賊ので、

計算された使用方法:

データ:{
     // ルフィフルネーム:モンキー・D・ルフィ 
    のfirstName 'モンキー' 
    secnameここ: 'D' 
    thirdName: 'ルフィ' 
  }、
  計算:{ 
    luFei_Name:関数(){
       戻り 、これを + .firstName この .secName + この.thirdName 
    } 
  } 
// 「海軍の王」から「ルフィ」 
vm.thirdName = '海軍の王   // モンキー・D・海軍王

2間の記述の違い:

新しい新しいヴュー({ 
  EL: '#app' // 呼び出し、それぞれgetMethodsDate、getComputedDate方法をクリックし、2つのボタンを設定
  テンプレート: 
 " <DIV ID = "アプリケーション"> 
    <ボタン@ =をクリックして"getMethodsDate">メソッド</ボタン> 
    <ボタン@ =をクリックして"getComputedDate">計算された</ボタン> 
</ div> " 
  メソッド:{ 
    getMethodsDate:機能(){ 
      アラート(新新A日付())
    }、
    //は設定計算された属性計算オプションを返します- computedDate 
    getComputedDate:関数(){ 
      アラート(。computedDateは) 
    }  
  }、
  計算しました:{
    computedDate:関数(){
       リターン 新しい新しいA日付()
    } 
  } 2回のクリックが同じ時間を返すように計算されていることに注意してください!



1.二回の方法は、時間を返すクリックすると、異なる

2回のクリック時に計算リターンは同じであること2.注

2回のクリックがそれを返すために同じ時間を計算するのはなぜ[注]?新しい日付()はデータ依存(オブジェクト・インスタンス内の他のデータのデータではない)ではない、それだけ再計算することなく、キャッシュの計算値を提供します

 

おすすめ

転載: www.cnblogs.com/DreamerLeaf/p/12053256.html