Vue深度监听总结

关于深度watch的一点总结

最近两天项目中需要监听多层嵌套的属性。由于在之前项目里，对Vue中watch的使用都是停留在简单层面，所以在需要监听一个多层嵌套的属性时，就显得我 too young too simple了。因此，又去vue官网、掘金什么的深入学习，并且用代码测试了一番。

template中的内容：

<template>
  <div id="Index">
    <p>Name: <input type="text" v-model="person.basicInfo.name"></p>
    <p>Friend：<input type="text" v-model="friend"></p>
    <p>Address：<input type="text" v-model="person.address"></p>
  </div>
</template>

script部分定义data：

  data() {
    return {
      person: {
        basicInfo: {
          name: '',
        },
        address: ''
      },
      friend: ''
    }
  }

watch浅监听
vue的watch可以直接监听data对象定义的第一层属性和第二层属性。

• 监听data对象的friend属性：

 watch: {
    //第一层级浅监听
    'friend': {
      handler: function (newVal, oldVal) {
        console.log("******watch friend********");
        console.log("newVal:", newVal);
        console.log("oldVal:", oldVal);
      }
    }
  }

• 监听address属性：

watch: {
    //第二层级浅监听
    'person.address': {
      handler: function (newVal, oldVal) {
        console.log("******watch address********");
        console.log("newVal:", newVal);
        console.log("oldVal:", oldVal);
      }
    }
  }

watch深监听
当要监听data对象的第三层或更深层属性时，得用到官网介绍的watch的deep属性。

• 监听name属性：

watch: {
   //第三层级深度监听
    'person.basicInfo.name': {
      handler: function (newVal, oldVal) {
        console.log("******watch name********");
        console.log("newVal:", newVal);
        console.log("oldVal:", oldVal);
      },
      deep: true //设置深度监听
    }
  }

第一次在SCDN上写总结，虽然没啥子深度，但是有助于我对知识点的消化，下次还来。