Vue-watch はオブジェクトのプロパティをリッスンします

1. Vueウォッチの概要

Vue の監視リスナー形式には、方法格式と对象格式listen の 2 種類があります。

1. メソッド形式のリスナーは监听简单数据类型、次のようなことしかできません。Number、String、 ... オブジェクトのプロパティの変更を監視したり、ページに入ったときに自動的にトリガーしたりすることはできません。
2. オブジェクト形式リスナーは对象属性変更をリッスンできます。特定の条件下では、ページのロード時にデータの変更を監視することもできます。

2. Vueオブジェクトのリスナーメソッド

1. キー名は某一个属性オブジェクトの変更を監視するために分割され、
   プロパティ名は.オブジェクトから分離され、引号オブジェクトの特定のプロパティを監視するためにラップされます。

data() {
    
    
	return {
    
    
		obj:{
    
    
			name:'andy',
			age:18
}}},

watch:{
    
    
	'obj.name'(newval.oldval) {
    
     
		// 代码实现
	}
}

2. 計算 + 監視、某一个オブジェクトのプロパティの変化を監視します。

computed:{
    
    
     ageVal() {
    
    
           return this.obj.age;
     }
}
 watch:{
    
    
     ageVal(newval,oldval) {
    
    
           // 代码实现
     }
}

3. deep 詳細な監視、所有属性オブジェクトの変更を監視します。
   1. deep：trueディープ モニタリングが有効になっている場合、プロパティ値を変更するとディープ モニタリングがトリガーされます。
   2. deep 詳細モニタリングでは最新の値のみを取得できます。
   3. 深い監視は推奨されません。深い監視では監視対象オブジェクト内のすべてのネストされたプロパティを走査する必要があるため、ページ フリーズが発生しやすくなります。

obj:{
    
    
      handler(val) {
    
    
           // 代码实现   val 值是 obj 整个对象
      },
      deep:true // deep 为 true 时，开启深度监听
      // immediate:false 当immediate 值为 true 时，刚载入页面时，也可监听数据的变化
}