vue监听器

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

使用监听器

监听器是在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
    }
  }