計算と監視の違い

1、計算して監視する

前回の演習では、特定のデータ変更を監視するために computed を使用しました。コンピューテッドとウォッチの両方がデータの変更を監視できることは誰もが知っていますが、それらを区別するにはどうすればよいでしょうか?

1.1 時計

1.1.1 ウォッチの単純な実行

<template>
  <div class="stylebg">
    <div class="mt22">
      watch的运用
    </div>
    <div>
      姓：<el-input v-model="firstName"></el-input>
    </div>
    <div>
      名：<el-input v-model="secondName"></el-input>
    </div>
    <div>
      {
   
   {fullName}}
    </div>
  </div>
</template>

<script>
export default {
      
      
  data(){
      
      
    return{
      
      
      firstName:'1',
      secondName:'2',
      fullName:''
    }
  },
  watch:{
      
      
     firstName(fValue){
      
      
       console.log('执行了watch')
       this.fullName = fValue + this.secondName
     },
    secondName(sValue){
      
      
      this.fullName = this.firstName + sValue
    },
  }
}
</script>

<style scoped>
  .mt22{
      
      
    margin:22px 0;
  }
</style>

スクリーンショットを実行する

1.2.1 時計の特徴

上記のコードによれば、watch の次の 5 つの特性を要約できます。

1. 1 つのデータをリッスンし、1 つの属性が複数の属性に影響を与える
2. 返品せずに返品
3. 最初のロードではウォッチ内の属性名をリッスンしません。
4. 非同期操作をサポートし、非同期を監視できます。
5. キャッシュをサポートしていません

1.3.1 ウォッチの最初のロード

上記の 1.2 で実行されているコードから、初めてページをロードするとき、ウォッチはウォッチ内の属性名を監視しないと結論付けることができます。そのため、この制限に対処する方法はありますか? 詳細については 1.3.1 で説明します。

1.3.1.1 ウォッチの最初のロードを実現する方法

1.2のコードをさらに改良し、属性名にimmediate:true関連属性を定義し、内部属性メソッドhandler()に割り当てられた最新の値を書き込むことで、初めてリスナーをロードできるようにしました。 . ウォッチの属性名。

<template>
  <div class="stylebg">
    <div class="mt22">
      watch的运用
    </div>
    <div>
      姓：<el-input v-model="firstName"></el-input>
    </div>
    <div>
      名：<el-input v-model="secondName"></el-input>
    </div>
    <div>
      {
   
   {fullName}}
    </div>
  </div>
</template>

<script>
export default {
      
      
  data(){
      
      
    return{
      
      
      firstName:'1',
      secondName:'2',
      fullName:'',
    }
  },
  watch:{
      
      
    firstName: {
      
      
        // 监听数据
      handler(fValue) {
      
      
          console.log('执行了watch')
          this.fullName = fValue + this.secondName
      },
      deep: true, // 深度监听
      immediate:true, //当 watch 一个变量的时候，初始化时并不会执行你需要在created的时候手动调用一次。添加immediate属性，这样初始化的时候也会触发
    },

    secondName(sValue){
      
      
      this.fullName = this.firstName + sValue
    }
  }

}
</script>

<style scoped>
  .mt22{
      
      
    margin:22px 0;
  }
</style>

スクリーンショットを実行する

実行中のスクリーンショットから、ページが初めて読み込まれるときに、firstName プロパティ名の内部コードが実行されることがわかります (コンソールに出力される「実行された監視」という文字列と、インターフェースに表示されるフルネーム)

2.1 計算済み

2.1.1 計算結果の簡単な操作

<template>
  <div class="stylebg">
    <div class="mt22">
      computed的运用
    </div>
    <div>
      姓：<el-input v-model="firstName2"></el-input>
    </div>
    <div>
      名：<el-input v-model="secondName2"></el-input>
    </div>
    <div>
      {
   
   {fullName2}}
    </div>
  </div>
</template>

<script>
export default {
      
      
  data(){
      
      
    return{
      
      
      firstName2:'1',
      secondName2:'2',
      // fullName2:''
    }
  },
  computed:{
      
      
    fullName2(){
      
      
      console.log('执行了computed')
      return this.firstName2 + this.secondName2
    }
  },
}
</script>

<style scoped>
  .mt22{
      
      
    margin:22px 0;
  }
</style>

スクリーンショットを実行する

2.2.1 計算されたものの特徴

上記のコードによれば、computed の次の 5 つの特性を要約できます。

1. 複数のデータをリッスンし、複数の属性が 1 つの属性に影響を与える
2. 戻るには return を使用する必要があります
3. 最初の読み込みでは、計算された属性名をリッスンします。
4. 非同期操作をサポートできず、非同期操作でのデータ変更を監視することもできません
5. 値がフェッチされるたびに再計算する必要を避けるため、キャッシュをサポートします。

2.2.2 計算結果での属性名の設定の問題

コードの作成時に問題が発生しました。computed は実行時に計算値を変数 fullName2 に直接返しますが、同時にデータに fullName2 の空の文字列があるため、コードの実行時にエラーが発生します。このエラーはなぜ起こるのでしょうか? これには主に属性名の変更が含まれます。

2.2.2.1 data および compted の属性を再定義できず、エラーが報告されるのはなぜですか?

vm インスタンスでハングアップしたデータの実行では、以下の vue ソースコードが参照されます。

 	function initState (vm) {
    
    
       vm._watchers = [];
       var opts = vm.$options;
       if (opts.props) {
    
     initProps(vm, opts.props); }
       if (opts.methods) {
    
     initMethods(vm, opts.methods); }
       if (opts.data) {
    
    
         initData(vm);
       } else {
    
    
         observe(vm._data = {
    
    }, true /* asRootData */);
       }
       if (opts.computed) {
    
     initComputed(vm, opts.computed); }
       if (opts.watch && opts.watch !== nativeWatch) {
    
    
         initWatch(vm, opts.watch);
       }
     }

上記から、コードは props とその他のメソッドを vm インスタンスにマウントし、実行シーケンスは props→methods→data→computed→watch であることがわかります。したがって、属性名が同じ場合、後の値が前の値を上書きします。実際の動作では、属性名の変更のエラーが直接スローされます。
コードを記述する際には、属性名の繰り返し記述を避ける必要があります。

2. 計算と監視の違い

最初の章で computed と watch の操作を紹介した後、それらの違いをリストします。

時計	計算された
1 つのデータをリッスンし、1 つの属性が複数の属性に影響を与える	複数のデータをリッスンし、複数の属性が 1 つの属性に影響を与える
返品せずに返品	戻るには return を使用する必要があります
最初のロードでは、ウォッチ内の属性名はリッスンされません (immediate: true が設定されていない場合)。	最初の読み込みでは、計算された属性名をリッスンします。
非同期操作をサポートし、非同期を監視できます。	非同期操作をサポートできず、非同期操作でのデータ変更を監視することもできません
キャッシュをサポートしていません	値がフェッチされるたびに再計算する必要を避けるため、キャッシュをサポートします。

3. computed と watch で一般的に使用されるシナリオ

watch:非同期操作または高コストのシナリオの場合、検索ボックスに文字列を入力すると API が呼び出され、対応するデータ リストが動的に取得されます。
計算済み:ショッピング カートで複数のアイテムがチェックされている場合は、各アイテムの価格属性をチェックして、合計価格の属性に影響を与えます。