vue watch监听的实战用法

vue watch官方文档案例介绍

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log(\'new: %s, old: %s\', val, oldVal)
    },
    // 方法名
    b: \'someMethod\',
    // 深度 watcher
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 该回调将会在侦听开始之后被立即调用
    d: {
      handler: function (val, oldVal) { /* ... */ },
      immediate: true
    },
    e: [
      function handle1 (val, oldVal) { /* ... */ },
      function handle2 (val, oldVal) { /* ... */ }
    ],
    // watch vm.e.f\'s value: {g: 5}
    \'e.f\': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1

这一段是vue官方文档的一段示例，如果您是vue的资深用户，请直接跳过这段，这里主要是讲当data中的数据发生改变后，在watch中声明了监听的字段会触发其回调函数，拿到当先val及改变前的oldval.

现在来讲实战中可能会用的地方,上代码

1.场景一： 如果是需要手动做校验的情况，需要监听例如表单元素变化的可以直接使用上诉例子(这里我们已组件中的写法来做演示)

<template>
	<form>
		<input v-model=\"obj.a\" type=\"text\" />
	</form>
</template>

< >
export default {
	name: \'test\',
	data () {
		return {
			obj: {
				a: \'hello world\'
			}
		}
	},
	watch: {
		\'obj.a\' (val, oldVal) {
			...your code
		}
	}
}
</ >

2.场景二：那么这里可能有出现如下场景，比如这个页面需要处理数据的回显，例如编辑功能需要在数据初始化的时候就要触发watch的监听做某些事情，此时应该怎么做？

代码改至如下

<template>
	<form>
		<input v-model=\"obj.a\" type=\"text\" />
	</form>
</template>

< >
export default {
	name: \'test\',
	data () {
		return {
			obj: {
				a: \'hello world\'
			}
		}
	},
	watch: {
		\'obj.a\': {
			handler: function (val, oldVal) { /* ... */ },
			// immediate这个属性需要加上，代表该回调将会在侦听开始之后被立即调用
     	    immediate: true
		}
	}
}
</ >

仔细观察， ‘obj.a’写法由函数变成传入一个对象（这里不深究底层原理，只讲用法）。

当然如果您看到这里还未解决你碰到问题，那么我猜测您可能碰到与我一样的问题，请继续阅读

3.场景三：对于复杂的字符串监听，直接上代码
还是拿上诉例子修改

<template>
	<form>
		<input v-model=\"obj[\'a.index.name\']\" type=\"text\" />
	</form>
</template>

< >
export default {
	name: \'test\',
	data () {
		return {
			obj: {
				\'a.index.name\': \'hello world\'
			}
		}
	},
}
</ >

data中的数据由简单的字符串变为复杂的待处理的，这种怎么办？如果还用之前的那种监听方式，可能会报下诉错误

Failed watching path: “XXXXX” Watcher only accepts simple dot-delimited paths. For full control, use a function instead.

意思是说，只接受简单的点分隔路径。 要完全控制，请改用函数。

那么问题来了，如何改写成函数形式，这里我在文档中找了很久在发现，在此分享给诸位。

由此可知，代码改为如下

<template>
	<form>
		<input v-model=\"obj[\'a.index.name\']\" type=\"text\" />
	</form>
</template>

< >
export default {
	name: \'test\',
	data () {
		return {
			obj: {
				\'a.index.name\': \'hello world\'
			}
		}
	},
	created () {
		this.$watch(
			function () { // 第一个函数就是处理你要监听的属性，只要将其return出去就行
				return this.obj[\'a.index.name\'];
			},
			function (old, valold) {
			 ... your code
			}
		)
	}
}
</ >

是不是很简单，哈哈！