使用监听器
监听器是在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>
监听器函数可以接收两个参数：当前值、改变之前的值）
运行结果：
在千米或者米德输入框中输入数据，可以看到另一个输入框中的数据也会跟着改变
监听器的更多形式
监听器在定义是，除了直接写一个函数外，还可以接一个方法名
代码演示：
<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>
运行结果：
监听器还可以监听一个对象的属性变化代码演示：
<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>
运行结果：
注意在监听器对象属性改变时，使用了两个新的选项：
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 } }
