vue.js中watch的用法

• 常用用法：使用watch监听数据的变化，当数据变化时，执行监听处理函数

  <template>
      <div>
          <p>name: {{ name }}</p>
          <input type="text" v-model="name">
      </div>
  </template>
  <script>
      export default {
          name: 'index',
          data(){
              return{
                 name:'abcc'
              }
          },
          // 监听处理函数
          watch: {
             name(newVal, oldVal){
                 console.log("变化前====>", oldVal);
  		       console.log("当前值====>", newVal);
  		    },
          }
      }
  </script>

• 立即执行：在name值第一次绑定的时候，不会执行监听函数，如果需要在最初绑定值的时候执行函数，需要用到immediate属性

  <template>
      <div>
          <p>name: {{name}}</p>
          <input type="text" v-model="name">
      </div>
  </template>
  <script>
      export default {
          name: 'index',
          data(){
              return{
                 name:'abcc'
              }
          },
          watch: {
            name: {
  		    　handler(newVal,oldVal) {
  		        console.log("变化前====>", oldVal);
  		        console.log("当前值====>", newVal);
  		    　},
  	    　　	immediate: true
  	   	  }
          }
      }
  </script>

• 深度监听：当需要监听对象属性的变化时，上述写法无法实现，此时需要用到deep属性

  • 监听对象的任一属性变化

    <template>
        <div>
            <p>name: {{ person.name }}</p>
            <p>job: {{ person.job }}</p>
            <input type="text" v-model="person.name">
            <input type="text" v-model="person.job">
        </div>
    </template>
    <script>
        export default {
            name: 'index',
            data(){
                return{
                  person:{
                  	name:'abcc',
                  	job:'game'
                  }
                }
            },
            watch: {
              person: {
    		    　handler(newVal,oldVal) {
    		      	console.log("变化前的对象====>", oldVal);
    		        console.log("当前值的对象====>", newVal);
    		    　},
        　　		deep:true
    	   	  }
            }
        }
    </script>

  • 监听对象的某一属性变化

    <template>
        <div>
            <p>name: {{ person.name }}</p>
            <p>job: {{ person.job }}</p>
            <input type="text" v-model="person.name">
            <input type="text" v-model="person.job">
        </div>
    </template>
    <script>
        export default {
            name: 'index',
            data(){
                return{
                  person:{
                  	name:'abcc',
                  	job:'game'
                  }
                }
            },
            watch: {
              // 如果只监听对象的某一属性,用字符串形式
              'person.name': {
    		    　handler(newVal,oldVal) {
    		      	console.log("变化前的对象属性值====>", oldVal);
    		        console.log("当前值的对象属性值====>", newVal);
    		    　},
        　　		deep:true
    	   	  }
            }
        }
    </script>