vue—watch深度监听与immediate

可以在watch增加判断，当符合条件时改变data中的数据
如果要监听的是对象 则需要使用deep选项 设置为true即可

<div id="app">
  <p><input type="text" name="" id="" v-model="pig.name"></p>
  <p><input type="text" name="" id="" v-model="pig.age"></p>
  <p>姓名：{{pig.name}}</p>
  <p>性别：{{pig.sex}}</p>
  <p>年龄：{{pig.age}}</p>
  <p>身高：{{pig.height}}</p>
</div>

JavaScript

var vm = new Vue({
  el: '#app',
  data: {
    pig: {
      name: '戴小姐',
      sex: '女',
      age: '18',
      height: '160'
    }
  },
  watch: {
    pig: {
      handler(newVal) {
        console.log(newVal.name);
        if (newVal.name == '王先生') {
          newVal.age = 19;
          newVal.sex = '男';
          newVal.height = '185';
        }
      },
      immediate: false,
      deep: true
    }
  }
})

代码演示：

属性:该值默认是false，在进入页面时，第一次绑定值，watch不会"立刻执行"监听，只有数据发生改变才会执行handler中的操作。

immediate:false,值为true或false，默认false
immediate:true,----刚进入页面的时候，watch可以立刻监听到对象中属性的值。
immediate:false时：

immediate:true时：