vue で監視監視オブジェクトと対応する値の変更を実装する方法

以下に、vue watch 監視オブジェクトの変更と対応する値の詳細な説明を共有します。これは優れた参考値であり、皆様のお役に立てれば幸いです。

は次のとおりです:

var vm=new Vue({
  data:{
    a:1,
    b:{
      c:1
    }
  },
  watch:{
    a(val, oldVal){//普通的watch监听
      console.log("a: "+val, oldVal);
    },
    b:{//深度监听，可监听到对象、数组的变化
      handler(val, oldVal){
        console.log("b.c: "+val.c, oldVal.c);//但是这两个值打印出来却都是一样的
      },
      deep:true
    }
  }
})
vm.a=2
vm.b.c=2

aは、aの値が変化するときに監視されます。Bはオブジェクトであり、aのように直接書き込むことはできません。はキャプチャできますが、b オブジェクトの特定の値の変化をキャプチャしたい場合、図に示すように、出力された 2 つの値が異なることがわかりました。オブジェクトが変更されたことだけがわかりますが、どの値が変更されたかはわかりません。オブジェクトの特定の値の変更を監視したい場合は、計算された属性 computed

var vm=new Vue({
  data:{
    b:{
      c:1
    }
  },
  watch:{
    newValue(val, oldVal){
      console.log("b.c: "+val, oldVal);
    }
  },
  computed: {
  　　newValue() {
  　　　　return this.b.c
  　　}
  }
})
vm.b.c=2

を使用して、 computed の計算値を監視すると、どの対応する値が変化したかを直接知ることができます。結果は次のとおりです。将来。

関連記事:

nodejsで実装する簡単なWebサーバー機能の例

vue-cliで作成したプロジェクト、マルチページ実装の設定方法

nodejsでmysqlにアクセスして操作する簡単な方法の例データベース

以上がvue で監視監視オブジェクトと対応する値の変更を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。