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

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

news 2025/8/24 1:01:48

一. computed计算属性

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

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

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

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

watch(data, (newValue, oldValue) => {console.log(newValue, oldValue)
})

参数说明：
- 第一个参数 data：表示要监听的对象或属性。
- 第二个参数是一个回调函数，接受两个参数：
  - newValue：新值。
  - oldValue：旧值。
功能描述：
- 这段代码会在 data 对象中的任何属性发生变化时执行回调函数，并打印出新旧值。
应用场景：
- 可以用来监控数据变化并根据变化执行相应的业务逻辑，例如数据变化后发送网络请求更新其他相关数据等。
注意事项：
- 如果需要监听对象内部属性的变化，需要使用更详细的配置或者使用 Vue 的响应式系统特性。
- 在 Vue 3 中推荐使用 watchEffect 或者 watch 函数结合 ref 来实现更细粒度的监听。

watch(()=>data.value.msg, (newVal) => {console.log(newVal)
})

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

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

watch(data, (newVal) => {console.log(newVal)
},{deep:true,immediate:true})

deep :

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

watch(data, (newVal) => {console.log(newVal)
},{deep:true})

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

watchEffect(() => {console.log(name.value, age.value)
})

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

watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。
watchEffect，则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。