Vueでのwatchリスニングの使い方

1、基本用法:
firstName値が変化すると、watchが傍受して実行されます.

<template>
  <div class="watch">
    <p>FullName: {
    { fullName }}p>
    <p>FirstName: <input type="text" v-model="firstName" />p>
  div>
template>
<script>
export default {
      
  name: "listen",
  data() {
      
    return {
      
      firstName: "Dawei",
      lastName: "Lou",
      fullName: ""
    };
  },
  watch: {
      
    //     
    firstName(newName, oldName) {
      
      this.fullName = newName + " " + this.lastName;
    },
  },
};
script>

2、handlerメソッドとimmediateプロパティ:
上の例は値が変化したときにwatchが実行されるので、値が最初にwatchが実行されるようにするにはhandlerとimmediateの属性を使います.
immediate:コンポーネントのロードはすぐにコールバック関数の実行をトリガーします.
deep:深さリスニングは、オブジェクトの内部値の変化を発見するために、複雑なタイプのデータを使用する場合に使用されます.例えば、配列内のオブジェクトの内容の変化は、リスニング配列の変動に注意してください.注意:deepは配列の変動とオブジェクトの新規を傍受することはできません.vue配列変異を参照すると、応答的にトリガーされるだけで傍受されます.

watch: {
     
	// handler    
  firstName: {
     
    handler(newName, oldName) {
     
      this.fullName = newName + ' ' + this.lastName;
    },
    //    wacth    firstName            handler  ，
    //      false，           
    immediate: true
  }
}

3、deep属性(深度リスニング、共通語オブジェクトの下の属性の変更):

<template>
  <div class="watch">
    <p>FullName: {
    { obj.fullName }}p>
    <p>FirstName: <input type="text" v-model="obj.firstName" />p>
  div>
template>
<script>
export default {
      
  name: "listen",
  data() {
      
    return {
      
      obj: {
      
        firstName: "Dawei",
        lastName: "Lou",
        fullName: ""
      },
    };
  },
  watch: {
      
    // handler    
  obj: {
      
    handler(newName, oldName) {
      
      console.log('obj.firstName changed!!')
    },
    immediate: true
  },
};
script>

入力ボックスにデータビューを入力objを変更する.firstNameの値は無効です(console.logのログは印刷されません).現代のJavaScriptの制約(およびObject.observeの廃棄)により、Vueはオブジェクト属性の追加または削除を検出できません.Vueはインスタンスの初期化時に属性に対してgetter/setter変換プロセスを実行するため、Vueを変換するには、属性がdataオブジェクト上に存在する必要があります.そうすれば、応答することができます.
デフォルトではhandlerはobjという属性の参照の変化のみを傍受し、mountedイベントフック関数でobjを再割り当てするなど、objに値を割り当てる場合にのみ傍受します.

mounted: {
     
  this.obj = {
     
    firstName: 'jyy'
  }
}

では、objの属性aの値を傍受する必要がありますか?deepプロパティが役立ちます.

watch: {
     
  obj: {
     
    handler(newName, oldName) {
     
      console.log('obj.firstName changed');
    },
    immediate: true,
    deep: true
  }
}

このような方法は性能に大きな影響を及ぼし,objのいずれかの属性を修正すると,このリスナーのhandlerがトリガーされる.変更が必要な特定の値をリスニングできます.

watch: {
     
  'obj.firstName': {
     
    handler(newName, oldName) {
     
      console.log('obj.firstName changed');
    },
    immediate: true,
    // deep: true
  }
}

オブジェクト内の値のリスニングはdeepプロパティを必要とせずにリスニングできます
watchのログアウトはここではあまり言わないが,実際の開発ではコンポーネントとともにwatchが破棄される.