vue watch的使用

<template>
  <div>
    <input type="text" v-model="text">
  </div>
</template>
<script>
export default {
  data () {
    return {
      text: '',
	  obj: {
		inObj: ''
	  }
    }
  },
  watch: {
    text (val) {
      alert(val)
    }
  }
}
</script>
<style lang="less" scoped>
</style>

watch  两种写法
    sample (newValue) {}
    sample2 (newValue, oldValue) {}
    
代码初次加载编译时，watch会与被监听的属性进行监听绑定，
只有当watch监听属性发生变化时，才会触发监听属性对应的的方法，
上例中即指的是sample对应的方法体
如果需要在watch绑定属性时及触发对应方法，需要将触发设置和执行方法分开
触发设置： immediate
           immediate:true代表如果在 wacth 里声明了 sample 之后，就会立即先去执行里面的handler方法，
           如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。
方法体：   handler
           给sample绑定了一个handler方法，之前写的 watch 方法其实默认写的就是这个handler，
           Vue.js会去处理这个逻辑，最终编译出来其实就是这个handler。

watch: {
		sample: {
			handler (newValue, oldValue) {},
			immediate: true
		}
	}

如上设置即可。

watch 里面还有一个属性 deep，默认值是 false，代表是否深度监听

Vue 不能检测到对象属性的添加或删除。
由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，
所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

默认情况下 handler 只监听obj这个属性它的引用的变化，只有给obj赋值的时候它才会监听到.
如果需要监听obj对象的属性inObj的变换，就可以通过设置deep为true达到目的。
 

   watch: {
        sample: {
            handler (newValue, oldValue) {},
            immediate: true,
            deep: true
        }
    }

这样Vue.js才会一层一层解析下去，直到遇到属性inObj，然后才给inObj设置监听函数

注销watch
当页面的路由跳转后，其实原watch就没用了，这时应该注销掉原来页面的 watch 的，不然的话可能会导致内置溢出。
写在组件间的watch会随着页面的销毁而销毁，但如果watch被作为对象创建时，就需要手动销毁了。
 

const unWatch = app.$watch('text', (newVal, oldVal) => {
  console.log(`${newVal} : ${oldVal}`);
})
unWatch(); // 手动注销watch