vue侦听器

什么是侦听器

侦听器 watch 和computed（计算属性）一样 是vue组件配置选项中的一个
侦听器本质上也是一个函数 他主要用来监听数据的变化（侦听器 watch主要用来侦听data或computed这二个数据）
我们使用的时候 要侦听那个数据 就用那个数据名作为方法名即可

参数解释：

newVal:是改变以后的值

oldVal:是改变前的值

基本语法:

watch:{
	"被侦听的属性名"(newVal, oldVal){
		}
	}

 侦听器的完整语法：

<template>
  <div>
    <input type="text" v-model="name">
  </div>
</template>

<script>
export default {
  data(){
    return {
      name: ""
    }
  },
  // 目标: 侦听到name值的改变
  /*
  语法:
    watch: {
      变量名 (newVal, oldVal){
        // 变量名对应值改变这里自动触发
      }
    }
  */
  watch: {
    // newVal: 当前最新值
    // oldVal: 上一刻值
    name(newVal, oldVal){
      console.log(newVal, oldVal);
    }
  }
}
</script>

<style>

</style>

immediate用法：

上面是watch侦听器的普通用法，就是当未设置immediate或者immediate的值为false时，被侦听的变量在页面初次加载时第一次绑定值的时候，并不会执行监听操作；但是当设置了immediate的值为true时，则会立刻执行一次监听操作。

<template>
	<div></div>
</template>
<script>
	export default {
		data(){
			variable:null,
		},
		watch:{
			// 此处监听variable变量，当期有变化时执行
			variable(item1,item2){
				// item1为新值，item2为旧值
			},
			immediate:true // watch侦听操作内的函数会立刻被执行
		}
	}
</script>

 deep深度监听

侦听普通变量的变化是使用以上方法，当侦听的某个变量值是对象时则不起作用，这时需要使用deep深度监听。

<template>
	<div></div>
</template>
<script>
	export default {
		data(){
			obj:{
				a:''
			},
		},
		watch:{
			// 此处监听obj属性a值变量
			'obj.a'(item1,item2){
				// item1为新值，item2为旧值
			},
			deep:true
		}
	}
</script>

 如果对象内有多个属性，并采用以下写法，则对象内每个属性都会被侦听，每个属性的变化都会执行一次侦听操作。

<template>
	<div></div>
</template>
<script>
	export default {
		data(){
			obj:{
				a:'',
				b:'',
				c:''
			},
		},
		watch:{
			obj:{
				// 此处监听obj属性a值变量
				handler(item1,item2){
					// item1为新值，item2为旧值
				},
				deep:true
			}
		}
	}
</script>