vue篇:watch

1.说明

在vue中watch里面，可以配置监听具体某个值的变化,可传参数：
{ [key: string]: string | Function | Object | Array }
在vue官网中对其描述：
一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性

2.使用

简单的使用

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

<script>
export default {
		data() {
			return {
				name: "小宝",
			}
		},
		watch:{
			name(newName,oldName){
				console.log("newName=>"+newName);
				console.log("oldName=>"+oldName);
			}
		}
};
</script>

上面例子使用 v-model 进行双向绑定
在input元素改变值时，就会触发 watch 里面的 name 方法，而这 name 方法就是自己在data方法区定义的数据。当然这是比较常用的使用方式，在官网还有其他使用方式:

{
    // 方法名
    name: 'someMethod',
    // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
    name: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 该回调将会在侦听开始之后被立即调用
    name: {
      handler: 'someMethod',
      immediate: true
    },
    name: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ]
}