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
    }
  }
});
相关推荐
用户6823806032251 分钟前
前端会用到的数据结构--堆(HEAP)
前端
莫空00002 分钟前
深入理解JavaScript的Reflect API:从原理到实践
前端·面试
卡布叻_星星2 分钟前
后端 Maven打包 JAR 文件、前端打包dist文件、通过后端服务访问前端页面、Nginx安装与部署
前端·maven·jar
前端(从入门到入土)18 分钟前
前端请求后端服务403(Invalid CORS request)
前端
大猩猩X31 分钟前
vxe-upload vue 实现附件上传、手动批量上传附件的方式
vue.js·vxe-ui
蓝天白云下遛狗1 小时前
goole chrome变更默认搜索引擎为百度
前端·chrome
come112341 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
前端风云志1 小时前
TypeScript结构化类型初探
javascript
musk12122 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
翻滚吧键盘2 小时前
js代码09
开发语言·javascript·ecmascript