vue watch监听的实战用法

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>

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

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

代码改至如下

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

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

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

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

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

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

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

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>

<script>
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
			}
		)
	}
}
</script>

是不是很简单，哈哈！