watch深度监听

	普通的使用watch只能监听data里面的普通变量，如果想要监听对象就要借助handler函数，加上一个deep：true表示
	可以深度监听。

watch: {
     queryData: {
         handler(){
         	console.log('对象变了')
         },
         deep: true
     }
}

这玩意我几乎是第一次用,由于仿PS那种画图的,比较复杂,成功地用到了这种,是用于数据传递第一次不成功,即不是深度监听,比如 我有一个对象,我要监听这个对象,这个对象有x y坐标,只要坐标变一点，都要即时监听的到,于是，用到了immediate,deep

 watch: {
    // 深度监听模块有没有选中素材元素，有就需要更新模块背景图片地址
    item: {
      immediate: true, // fix 第一次获取数据不加载背景图片的bug
      handler: function(val) {
        if (this.item.pic || (this.item.picUnitList && this.item.picUnitList.length > 0)) {
          this.baseCallback(this.item.pic ? this.item.pic : this.item.picUnitList[0].pic)
        } else {
          this.baseCallback()
        }
        this.item.text = val.text
        this.imgItem.x = val.x
        this.imgItem.y = val.y
        this.imgItem.width = val.width
        this.imgItem.height = val.height
      },
      deep: true
    }
}

一、watch 深度监听

watch: {
  formData: {
    deep: true,
    handler(nv) {
      console.log("对象发生改变", nv);
    },
  },
},

二、使用 $set 改变对象值

created() {
  // 直接赋值监听无效
  // this.formData.name = "这是修改的名称";
  // this.formData.title = "这是修改的标题";
  
// 直接删除也无效
  // delete this.formData.title;

  // this.$set 赋值
  this.$set(this.formData, "name", "这是修改的名称");
  this.$set(this.formData, "title", "这是修改的标题");

   // this.$delete 删除
  this.$delete(this.formData, "name");
  this.$delete(this.formData, "title");
},