Vue 的 `watch` 与 `watchEffect`:介绍、使用与区别

简介

在 Vue 的 Composition API 中,watchwatchEffect 是两个用于观察和响应数据变化的函数。虽然这两者有一些相似性,但它们的用途和行为有一些关键区别。

watch 的介绍与使用

使用

watch 用于观察一个或多个响应式引用或计算属性,并在它们更改时执行一个函数。

javascript 复制代码
import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`);
    });
  }
}

选项

  • immediate: 是否立即执行回调函数。
  • deep: 是否深度观察(适用于对象或数组)。
  • flush : 控制回调何时执行(prepostsync)。

watchEffect 的介绍与使用

使用

watchEffect 用于立即执行一个函数,并响应该函数内部所依赖的所有响应式引用或计算属性。

javascript 复制代码
import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watchEffect(() => {
      console.log(`count is now ${count.value}`);
    });
  }
}

主要区别与相关点

主要区别

  • 自动侦测依赖 vs 显式声明 : watchEffect 自动侦测函数内所用到的所有响应式引用,而 watch 需要你明确指定要观察的引用。

  • 立即执行 : watchEffect 创建时会立即执行一次,而 watch 默认不会,除非设置了 immediate 选项。

  • 旧值与新值 : watch 回调提供新值和旧值,而 watchEffect 不提供。

  • 多源观察 : watch 可以观察多个源,但 watchEffect 观察函数内的所有响应式引用。

相关点

  • 响应性: 两者都提供强大的响应性支持。
  • 生命周期: 在组件卸载时,两者都会自动停止观察。

使用场景

  • 使用 watch:

    • 当你需要访问旧值和新值。
    • 当你需要基于条件观察某个值。
    • 当你需要更细粒度的控制(如 deep, flush 等选项)。
  • 使用 watchEffect:

    • 当你需要依赖多个响应式引用,并希望所有这些改变都触发同一函数。
    • 当你不需要旧值,只关心新值。

总结

watchwatchEffect 在 Vue 的 Composition API 中都是非常有用的工具,用于不同的观察和响应场景。理解它们的区别和使用场景是高效使用 Vue 的关键。

如果你有任何进一步的问题或需要详细解释,随时提出。希望这篇文章能帮助你更好地理解 watchwatchEffect 的不同用途和行为。

相关推荐
旧识君7 分钟前
前端图片压缩实战:基于compressorjs的高效解决方案
前端·javascript·vue.js
清风细雨_林木木39 分钟前
Vue 中 this.$emit(“update:xx“,value) 和 :xx.sync 实现同步数据的做法
前端·javascript·vue.js
自动花钱机1 小时前
ESLint语法报错
前端·javascript·vue.js·css3·html5
工业互联网专业1 小时前
基于springcloud微服务架构的巡游出租管理平台
java·vue.js·spring cloud·微服务·毕业设计·源码·课程设计
╰つ゛木槿2 小时前
Vue与React区别分析
前端·vue.js·react.js
thinkQuadratic2 小时前
vue修饰符
前端·javascript·vue.js
不吃香菜的猪2 小时前
el-dialog实现遮罩层后面的内容也能点击
前端·javascript·vue.js
喜陈2 小时前
解决elementui-plus使用el-table的合计功能时横向滚动条显示在了合计上方
前端·vue.js·elementui
清风絮柳10 小时前
51. “闲转易”交易平台小程序(基于springboot&vue)
vue.js·spring boot·小程序·毕业设计·校园二手交易平台·二手交易小程序·闲转易交易系统
dr李四维10 小时前
vue生命周期、钩子以及跨域问题简介
前端·javascript·vue.js·websocket·跨域问题·vue生命周期·钩子函数