当前位置：首页 > news >正文

Vue3 中选项式下的侦听器

news 来源：原创 2024/7/1 16:33:13

前言：

今天小编给大家讲解一下，Vue3 中选项式下的侦听器。

我正在参加 2022年「博客之星」年度总评选，请大家帮我支持一下，给我一个五星。
|
点击前往我的评选页面：
|

大家只要按图给我五星即可，谢谢大家的帮助。

watch 侦听的分类：

函数式的侦听器

其中函数名就是要侦听的数据源，函数中的参数，为新数据源的新、旧值；

watch: {
  // 函数式侦听器
  age(newVal, oldVal) {
    console.log("newVal：" + newVal);
    console.log("oldVal：" + oldVal);
  },
},

对象式侦听器

在 watch 选项中声明的对象即为对象侦听器

对象名就是要侦听的数据源。
对象中的 handler 方法为数据源发生改变时，执行的代码块，其中参数一为新值，参数二为旧值
deep：
1. watch 默认是浅层，被侦听的属性，仅仅在被赋新值时，才会触发回调，嵌套的属性发生变化时，不会触发；
2. 如果想侦听所有嵌套的变更，你需要深层侦听器：deep:true 选项；
3. 深度侦听需要遍历被侦听对象中所有嵌套的属性，按需使用，开销很大。
immediate：立即执行
1. watch 默认是懒执行的，仅当数据源变化时，才会执行。但是在很大业务中，我们需要在创建侦听器，立即执行一遍回调，可采用 immediate:true 选项；
2. 按需使用；
flush：获取组件更新之后的 DOM
1. 默认情况下，创建的侦听器回调，都会在 Vue 组件更新之前被调用，这意味着在回调中访问的 DOM 将是更新之前的状态；
2. 如果想在侦听器回调中能访问被更新之后的 DOM，你需要设置 flush:‘post’

watch: {
  // 对象式侦听器
  "emp.name": {
    // 如果 epm.name 发生改变，将执行 handler 代码片段
    handler(newVal, oldVal) {
      console.log("newVal：" + newVal);
      console.log("oldVal：" + oldVal);
      // 获取 DOM
      console.log(document.getElementById("main").innerHTML);
    },
    // deep：深度监听
    // deep: true,
    flush: "post",
  },
},

创建侦听器

在指定的位置，创建侦听器
语法：this.$watch(data,method,object)

data：侦听的数据源，类型为 String
method：当数据源发生改变时，执行的回调函数（新值，旧值）
object：配置，类型为对象（按需使用）

停止侦听器

需要自行停止侦听器时，可以调用 $watch() 返回的函数

mounted() {
  // 需要自行停止侦听器时，可以调用 $watch() 返回的函数
  this.stopWatch = this.$watch(
    "emp",
    (newVal, oldVal) => {
      console.log(newVal);
      console.log(oldVal);
    },
    { deep: true, flush: "post" }
  );
  setTimeout(() => {
    stopWatch();
  }, 3000);
},