Vue中watch监听属性的一些应用总结

【1】vue2中watch的应用

① 简单监视

在 Vue 2 中,如果你不需要深度监视,即只需监听顶层属性的变化,可以使用简写形式来定义 watch。这种方式更加简洁,适用于大多数基本场景。

示例代码

假设你有一个 Vue 组件,其中包含一个名为 message 的字符串属性,你希望监听这个属性的变化。你可以这样写:

javascript 复制代码
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  watch: {
    // 简写形式,直接指定 handler 函数
    message(newVal, oldVal) {
      console.log('message changed from', oldVal, 'to', newVal);
    }
  }
});

解释

  • message(newVal, oldVal) : 这个函数会在 message 属性发生变化时被调用。newVal 参数是新的值,oldVal 参数是旧的值。
  • watch : 在 watch 对象中,键是你想监听的数据属性名,值是一个函数,该函数会在属性值发生变化时被调用。

更复杂的例子

假设你有一个对象,但你只想监听对象的某个特定属性,而不是整个对象的深度变化:

javascript 复制代码
new Vue({
  el: '#app',
  data: {
    user: {
      name: 'Jack',
      age: 25
    }
  },
  watch: {
    // 监听 user.name 属性的变化
    'user.name'(newVal, oldVal) {
      console.log('user.name changed from', oldVal, 'to', newVal);
    }
  }
});

解释

  • 'user.name'(newVal, oldVal) : 这里使用字符串 'user.name' 作为键,Vue 会自动解析这个字符串并监听 user 对象的 name 属性的变化。
  • watch : 同样,在 watch 对象中,键是你想监听的数据属性路径,值是一个函数,该函数会在属性值发生变化时被调用。

总结

简写形式的 watch 非常适合用于监听顶层属性或对象的特定属性的变化。如果你不需要深度监视,这种简写形式可以使代码更加简洁和易读。如果你有更多复杂的需求,比如需要立即执行监听器或处理更深层次的变化,可以使用完整的对象形式。

② 深度监视

在 Vue 2 中,watch 是一个非常有用的工具,它允许开发者监听 Vue 实例上的数据属性的变化,并在这些属性变化时执行特定的操作。当你需要监听的对象是一个复杂的数据结构(如对象或数组),并且你希望监听该对象内部属性的变化时,就需要使用深度监视(deep watching)。

如何使用深度监视?

要启用深度监视,你需要在 watch 配置中添加一个对象而不是简单的函数。这个对象应该包含两个属性:handlerdeep

  • handler :这是一个函数,当被监听的数据发生变化时,这个函数会被调用。它接收两个参数:newValue(新值)和 oldValue(旧值)。
  • deep :这是一个布尔值,默认为 false。将其设置为 true 可以开启深度监视,这意味着 Vue 将会递归地监视对象的所有属性,直到最深层。

示例代码

假设你有一个 Vue 组件,其中包含一个名为 user 的对象,你希望监听 user.nameuser.age 的变化。你可以这样做:

javascript 复制代码
new Vue({
  el: '#app',
  data: {
    user: {
      name: 'Jack',
      age: 25
    }
  },
  watch: {
    // 监听 user 对象的变化
    user: {
      handler(newVal, oldVal) {
        console.log('user changed', newVal, oldVal);
      },
      deep: true // 开启深度监听
    }
  }
});

注意事项

  • 性能考虑:开启深度监听可能会导致性能下降,特别是当监听的对象非常大或嵌套层次很深时。因此,只有在确实需要监听对象内部属性的变化时才应使用深度监听。
  • 立即执行 :如果你想在初始化时也执行一次监听器,可以添加 immediate: true 到监听配置中。

示例代码(带立即执行)

javascript 复制代码
new Vue({
  el: '#app',
  data: {
    user: {
      name: 'Jack',
      age: 25
    }
  },
  watch: {
    user: {
      handler(newVal, oldVal) {
        console.log('user changed', newVal, oldVal);
      },
      deep: true,
      immediate: true // 初始化时立即执行一次handler
    }
  }
});
相关推荐
前端小巷子11 分钟前
JS 打造丝滑手风琴
前端·javascript·面试
Mintopia24 分钟前
多模态 AIGC 在 Web 内容创作中的技术融合实践:把“创作引擎”装进浏览器
前端·javascript·aigc
鹏多多.27 分钟前
flutter-使用fluttertoast制作丰富的高颜值toast
android·前端·flutter·ios
Mintopia37 分钟前
Next.js 的 Web Vitals 监测与 Lighthouse 分析:从底层到实战的快乐科学
前端·javascript·next.js
charlie11451419144 分钟前
前端三件套简单学习:HTML篇1
开发语言·前端·学习·html
很多石头1 小时前
前端img与background-image渲染图片对H5页面性能的影响
前端·css
yenggd1 小时前
3种XSS攻击简单案例
前端·xss
盖头盖1 小时前
【xss基本介绍】
前端·xss
一枚前端小能手1 小时前
「周更第2期」实用JS库推荐:Rsbuild
前端·javascript
小桥风满袖1 小时前
极简三分钟ES6 - 正则表达式的扩展
前端·javascript