vue中watch对象内部属性失效解决

Vue开发中遇到的坑

今天开发vue的时候，遇到了坑，现总结如下：

我在data里初始化了一个对象，然后，想要watch到对象的内部属性？

data:function(){
        return {
            form:{
                name:''
            }
        }
    },

 <input type="text" v-model="form.name">

具体代码如上，比如，我现在想要watch form.name这个属性值，当我像之前那样写的时候，直接语法报错！！！！

     watch:{
            form.name(){}
        }

所以，找到了如下的解决办法！！！！敲重点！！！！

• 解决一

      watch:{
          form:{
              handler(){
                  
                  console.log(this.form.name)
              },
              deep:true
          }
      }
  

• 解决二

  watch: {
       'form.name': {
           handler: function() {
              //do something
           },
       }
  }
  

• 解决三

  
  computed: {
      name: function() {
      	return this.form.name
      }
  }
  watch: {
       name: {
           handler: function() {
              //do something
           },
       }
  }
  //因为不能直接watch到对象(引用类型)的内部属性，所以利用计算属性，和中间变量解决