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

亚连
リリース: 2018-06-04 16:18:51
オリジナル
2331 人が閲覧しました

以下に、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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート