immediate: true时，watch的执行顺序，deep

参考：https://blog.csdn.net/weixin_53312997/article/details/127606312

watch对象的某个属性

 watch: {
    'obj.a': {
      handler(newVal, oldVal) {
        console.log('obj.a changed',newVal);
      },
    }
  },

一、watch的简单写法

watch: {
   filterText(newValue, oldValue) {
     console.log("filterText改变了");
   },
 },

二、watch的复杂写法以及immediate

data() {
	return {
		filterText: "",
	} 
},

watch: {
  filterText: {
 	immediate: true,// 会在created执行之前就调用一次handler
 	deep: true, //深度监听
    handler(newValue, oldValue) {
      console.log("watch--immediate");
    },
   
  },
},

created() {
  console.log("created");
},

mounted() {
  console.log("mounted");
},

执行结果：

三、watch的deep

<script>
export default {
  data() {
    return {
      person: {
        name: 'tm',
        age: 18
      }
    }
  },
  watch: {
    person: {
      deep: true,
      handler(newValue, oldValue) {
        console.log('person指向的地址 或者 person中的属性 改变了',newValue, oldValue);
        //无论是person指向的地址改变了，还是person中的属性改变了，newValue（改变后的person对象）和oldValue（改变前的person对象）都是以对象的形式返回的
        
      }
    }
  }
}
</script>

总结：
1、当watch设置 immediate: true时，handler是在created、mounted前执行的，所以在handler内获取dom元素会报错（dom元素还未挂载）；
2、当watch未设置 immediate时，是等 被监听元素 发生改变时，才执行handler；
3、watch既可以监视data中的属性，也能监视computed中的属性