Vueのwatchメソッドの使い方を詳しく解説

今回は、Vue での watch メソッドの使用方法について詳しく説明します。Vue で watch メソッドを使用する際の 注意事項 について、以下に具体的なケースを示します。

watch 自体は、ビュー内のデータを特定の関数に関連付けます。

Vue ビュー内のデータが変更されると、関連付けられた関数が実行されます。オブジェクト、キーは

式

の観察、値は対応するコールバックです。値はメソッド名、またはオプションを含むオブジェクトにすることもできます。インスタンス化するときに各キーに対して $watch() を呼び出します。

nbsp;html>


  <meta>
  <title>监听方法watch的使用</title>
  <script></script>


  <p></p>
  <script>
    var vm = new Vue({
      el: "#root",
      data: { obj: {name: "zhaoolee", age: 12} , tel:6666666},
      template: `<p><p>姓名: {{obj.name}}
        <p>电话: {{tel}}
        <input type="text" v-model="obj.name">
        <input type="text" v-model="tel">`,
      watch: {
        obj: {
         handler(){
           console.log("obj被改变");
         },
          // 页面加载之初先执行一次handle
         immediate: true,
          // 深度检查属性,即使对象内部的属性值改变, 也能检测到(比较消耗性能)
         deep: true
        },
        "obj.name": {
          handler(){
            console.log("=>obj.name被改变");
          }
        },
        tel:{
          handler(){
            console.log("tel被改变");
          }
        }
      }
    })
  </script>

この記事のケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vueプロジェクトにアイコンを導入する手順の詳細な説明

jsで配列パラメータを渡す方法

以上がVueのwatchメソッドの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。