使用监听器
监听器是在 vue 组件对象的 watch 选项中定义。
我们编写了两个监听器，分别监听数据数据 kilometers 和 meters 的变化，当其中一个数据属性的值发生改变时，对应的监听器就会被调用，经过计算的到另一个数据属性的值。 演示代码：
<template> <div id="app"> 千米：<input type="text" v-model="kilkometers"> 米：<input type="text" v-model="meters"> </div></template><script>export default { name: 'App', data() { return { kilkometers: 0, meters: 0 } }, watch: { kilkometers(val) { this.meters = val * 1000 }, meters(val, oldVal) { this.kilkometers = val / 1000 } }}</script>
复制代码
监听器函数可以接收两个参数：当前值、改变之前的值）
运行结果：
image.png
在千米或者米德输入框中输入数据，可以看到另一个输入框中的数据也会跟着改变
监听器的更多形式
监听器在定义是，除了直接写一个函数外，还可以接一个方法名
代码演示：
<template> <div id="app"> 千米：<input type="text" v-model="kilometers"> <p>{{meters}}米</p> </div></template><script>export default { name: 'App', data() { return { kilometers: 0, meters: 0 } }, methods: { checkage() { this.meters = this.kilometers * 1000 } }, watch: { kilometers: 'checkage' }}</script>
复制代码
运行结果：
image.png
监听器还可以监听一个对象的属性变化代码演示：
<template> <div id="app"> 年龄<input type="text" v-model="person.age"> <p v-if="info">{{info}}</p> </div></template><script>export default { name: 'App', data() { return { person: { name: 'xiaokai', age: 0 }, info: '' } }, watch: { person: { handler(val, oldval) { if (val.age >= 18) { this.info = '已成年' } else { this.info = '未成年' } }, deep: true } }}</script>
复制代码
运行结果：
image.png
注意在监听器对象属性改变时，使用了两个新的选项：handler和deep。handler用于定义当数据变化时调用的监听器函数，deep主要在监听对象属性变化时使用，该选项的值为true，表示无论该对象的属性在对象中的层级有多深，只要改属性的值发生变化，都会被监测到
监听器函数在初始渲染时并不会被调用，只有在后续监听的属性发生变化时才会被调用；如果想要监听器函数在监听开始后立即执行，可以使用 immediate 选项，将其值设置为 true，
如下面代码：
watch: { person: { handler(val, oldval) { if (val.age >= 18) { this.info = '已成年' } else { this.info = '未成年' } }, deep: true, immediate: true } }
复制代码
评论