vue WatchとComputedの使用の概要

エクスポートデフォルト{
    データ（） {
        戻る {
            番号: 1
        }
    },
    時計：{
        // 通常の監視方法。ここではデータ内の数値属性を監視することを意味します // 最初のパラメータは変更後の新しい値を示し、2 番目のパラメータは変更前の古い値を示します number(newVal,oldVal){
            コンソールにログ出力します。
            コンソールにログ出力します。
        }
    }
}

エクスポートデフォルト{
    データ（）{
        戻る {
            番号: 1
        }
    },
    時計：
        // 数値属性をリッスンする number: {
			ハンドラ(newVal, oldVal){
                
            },
            即時: true, // すぐに聞く}
    }
}

エクスポートデフォルト{
    データ（） {
        戻る {
            オブジェクト: {
                1: 1
            }
        }
    },
    時計：
        オブジェクト: {
            ハンドラ(newVal){
                console.log('聞いている', newVal)
            },
            即時: 真
        }
    },
    作成された(){
        // 属性の変更操作であるため監視できません // 一度印刷すると、印刷結果は変更された値になります。
        この.obj.a = 2 

        // オブジェクトへの直接割り当て操作なので監視できます // 2 回印刷します (即時監視は 1 回印刷され、変更は 1 回印刷されます)
        this.obj = {a: 2} 
    }
}

エクスポートデフォルト{
    時計：
        'obj.a': {
            ハンドラ(newVal){
                コンソールログ(新しい値)
            }
        }
    },
    作成された(){
        // 次の両方とも監視して 2 回印刷できます this.obj.a = 2
        this.obj = {a:2}
    }
}

エクスポートデフォルト{
    時計：
        オブジェクト: {
            ハンドラ(newVal){
            	コンソールログ(新しい値)
            },
            深い：本当、
            即時: 真
        }
    },
    作成された(){
        // 詳細な監視の後、属性の変更も直接監視できます // 2 回印刷します (即時のため)
        この.obj.a = 2
        
        // オブジェクト プロパティの追加を監視できません // 一度印刷すると、印刷結果は新しく追加されたプロパティを持つオブジェクトになります // つまり、即時であるため 1 回だけ実行され、{a:1,b:2} が印刷されます
        この.obj.b = 2
        
        // 監視はトリガーできますが、変更は監視できません // 2 回印刷され、両方の値は {a:2} であり、変更を反映できません this.$set(this.obj, 'a', 2)
    }
}

エクスポートデフォルト{
    データ（） {
        戻る {
            編曲: [1]
        }
    },
    時計：
        編曲: {
            ハンドラ(newVal, oldVal) {
                console.log('新規:', newVal)
                console.log('古い:', 古い値)
            },
            即時: 真
        }
    },
    作成された() {
        // 監視可能 --- 配列全体を直接割り当てる this.arr = [2]
        
        // 監視できません --- インデックスの割り当て、長さの変更 this.arr[1] = 2
        this.arr[0] = 2
        この.arr.長さ = 2
        
        // 監視をトリガーできますが、変更を監視することはできません => 新しい値と古い値は同じです this.arr.push(2)
        this.$set(this.arr, 0, 2)
    }
}

計算: {
  フルネーム：
    得る （） {
      `${this.firstName} ${this.lastName}` を返します。
    },
    設定(値) {
      const names = val.split(' ');
      this.firstName = 名前[0];
      this.lastName = names[names.length - 1];
    }
  }
}