vue中的监听器(watch,watchEffect)和计算属性(computed)

一. computed计算属性

computed属性用于创建依赖于其他数据源并可以缓存结果的属性。当依赖的数据发生变化时,计算属性会重新计算并且只在相关依赖改变时才会重新执行

javascript 复制代码
var sumPrice = computed(() => {
    let sum = 0;
    // 遍历数据,累加价格
    data.value.forEach(item => {
            sum += parseInt(item.price);
    });
    return sum;
});

计算属性相对于是一个特殊方法,与我们平常编写的计算方法差不多,唯一的区别就是节省内存,普通方法调用需要带(),使用计算属性则不用,返回的是一个属性变量


二. watch监听器


在 Vue.js 中,watch 是一种用于响应数据变化的方式。它允许你执行自定义的逻辑来响应特定数据属性的变化。

watch 的用途

  1. 执行复杂操作
    • 当被观察的数据变化时,可以执行一系列复杂的操作。
  2. 性能优化
    • 相比于计算属性,watch 更适合处理异步操作或执行开销较大的任务。
javascript 复制代码
watch(data, (newValue, oldValue) => {
  console.log(newValue, oldValue)
})
  1. 参数说明

    • 第一个参数 data:表示要监听的对象或属性。
    • 第二个参数是一个回调函数,接受两个参数:
      • newValue:新值。
      • oldValue:旧值。
  2. 功能描述

    • 这段代码会在 data 对象中的任何属性发生变化时执行回调函数,并打印出新旧值。
  3. 应用场景

    • 可以用来监控数据变化并根据变化执行相应的业务逻辑,例如数据变化后发送网络请求更新其他相关数据等。
  4. 注意事项

    • 如果需要监听对象内部属性的变化,需要使用更详细的配置或者使用 Vue 的响应式系统特性。
    • 在 Vue 3 中推荐使用 watchEffect 或者 watch 函数结合 ref 来实现更细粒度的监听。

监听对象的属性

javascript 复制代码
watch(()=>data.value.msg, (newVal) => {
  console.log(newVal)
})

有点特殊,首先监听的值要使用 ()=> 来指向值,其次值指向的值需要 .value来拿属性


三. 监听器中的属性


immediate :

可以让监听器在初始化时就执行一次。

javascript 复制代码
watch(data, (newVal) => {
  console.log(newVal)
},{deep:true,immediate:true})

deep :

选项使得 watch 能够监听对象内部属性的变化

javascript 复制代码
watch(data, (newVal) => {
  console.log(newVal)
},{deep:true})

四. watchEffect


而无需显式地指定要监听哪些数据,会自动跟踪,只需要写出值即可

javascript 复制代码
watchEffect(() => {
  console.log(name.value, age.value)
})

五. 区别

watchwatchEffect 都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式:

  • watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外,仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖,因此,我们能更加精确地控制回调函数的触发时机。

  • watchEffect,则会在副作用发生期间追踪依赖。它会在同步执行过程中,自动追踪所有能访问到的响应式属性。这更方便,而且代码往往更简洁,但有时其响应性依赖关系会不那么明确。

相关推荐
耶啵奶膘14 分钟前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具4 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer084 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf4 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据4 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161774 小时前
防抖函数--应用场景及示例
前端·javascript