踩坑经历

我刚开始对数组里的对象属性监听以下对象里的newValue是改变后的新值，oldValue是改变之前的旧值 

watch:{
  'listMenu[4].value':{
       handler(newValue, oldValue) {
　　　　　　console.log(newValue)
　　　　}

直接报错Watcher only accepts simple dot-delimited paths. For full control, use a function instead

解决方法

监听数组内对象属性变化

用以下两种方法即可：

//第一种方法：
created() {
  this.$watch(
    () => this.listMenu[4].value,
    function(val, old) {}
  )
}
 
//第二种方法：
computed:{
  watchInputData(){ return this.listMenu[4].value }
},
watch:{
  watchInputData() {
    //这里即可监听到
  }

监听一个对象及属性

/*普通watch无法监听到对象内部属性变化，只有data中数据改变时才能监听变化。
因此可添加deep属性:深层遍历，会监听对象内所有属性都变化。注意监听数组的变更不需要这么做。*/
watch: {
//第一种监听所有属性的变化,直接监听整个属性，消耗大不建议
    obj: {
      handler(newValue, oldValue) {
        console.log("对象所有属性监听", newValue, oldValue);
      },
      deep: true
    },
 
//第二种监听对象一个属性的变化
"obj.name": {
       immediate: true, //true首次加载执行，默认false
      handler(newValue, oldValue) {
        console.log("单个属性监听", newValue, oldValue);
      }
    },
}
同样也可以设置计算属性computed来监听 
omputed: {
  getName: function() {
    return this.obj.name
  }
}
watch: {
   getName: {
     handler: function() {
      //监听
     },
   }

首次加载不调用监听函数watch首次加载时不会调用的，只有值变化时才能执行，若要首次调用，需要使用immediate属性。只需在对应的函数内使用immediate: true即可；

公众号：前端老实人，获取更多学习资料以及与众多大佬交流机会