Vue侦听器watch

int_Q7
89 阅读1分钟
前言：

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第8天，点击查看活动详情

Vue侦听器watch

  • 什么是侦听器呢？

    • 开发中我们在data返回的对象中定义了数据，这个数据通过插值语法等方式绑定到template中；
    • 当数据变化时，template会自动进行更新来显示最新的数据；
    • 但是在某些情况下，我们希望在代码逻辑中监听某个数据的变化，这个时候就需要用侦听器watch来完成了；

  • 侦听器的用法如下：

    • 选项：watch
    • 类型：{ [key: string]: string | Function | Object | Array}

侦听器案例

例子：

  • 比如现在我们希望用户在input中输入一个问题；
  • 每当用户输入了最新的内容，我们就获取到最新的内容，并且使用该问题去服务器查询答案；
  • 那么，我们就需要实时的去获取最新的数据变化；
<template id="my- app">
  <label for= "question">
    请输入问题:
    <input type="text"  id="question" v-model="question">
  </label>
</template>

watch:， {
  question(newValue, oldValue) {
   console. log (newValue) ;
   this . getAnwser (newValue) ;
  },
methods: {
  getAnwser (question) {
    console.log(`${question}的问题答案是哈哈哈哈`);
  }
}

侦听器watch的配置选项

  • 我们先来看一个例子：
    • 当我们点击按钮的时候会修改info.name的值；
    • 这个时候我们使用watch来侦听info，可以侦听到吗？答案是不可以。
  • 这是因为默认情况下，watch只是在侦听info的引用变化，对于内部属性的变化是不会做出响应的：
    • 这个时候我们可以使用一个选项deep进行更深层的侦听；
    • 注意前面我们说过watch里面侦听的属性对应的也可以是一个Object；
  • 还有另外一个属性，是希望一开始的就会立即执行一次：
    • 这个时候我们使用immediate选项；
    • 这个时候无论后面数据是否有变化，侦听的函数都会有限执行一次；
watch: {
info:{
  handler (newValue, oldValue) ， {
    console. log (newValue, oldValue) ;
  },
  deep: true,
  immediate: true
},
  'info.name' : function(newValue, oldValue) {
   console.log (newValue, oldValue);
}

image.png

  • 我们可以在created的生命周期中，使用 this.$watchs 来侦听；
    • 第一个参数是要侦听的源；
    • 第二个参数是侦听的回调函数callback；
    • 第三个参数是额外的其他选项，比如deep、immediate；
avatar
文章
阅读
粉丝