[vue3] watch和watchEffect简记-Toy模板网

这篇具有很好参考价值的文章主要介绍了[vue3] watch和watchEffect简记。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

watch的数据源

watch函数的第一个参数是监听的数据源，可以是：

注：

响应式对象的属性需要使用getter监听。
当数据源是响应式对象时，其属性的变更会触发回调函数，但是接收到的newValue和oldValue是一样的，因为对象的引用是同一个。
和上一条不同，如果数据源是一个“返回响应式对象”的getter，除非对象的引用变更，否则不会触发回调函数。可以使用deep监听其所有的属性，使用递归实现，开销大，谨慎使用。
一般watch是先设置，监听到变化后再触发。如果需要设置的时候就先立即触发一次，使用immediate。

特点：

响应式状态的变更会同时触发：Vue组件更新和侦听器回调。

默认情况下，先执行侦听器回调，再执行Vue组件更新。这意味着在侦听器回调中的DOM是Vue更新组件之前的状态。

可以使用flush: post选项，调整这一顺序：

watch(source, callback, {
  flush: 'post'
})

watchEffect(callback, {
  flush: 'post'
})

如果觉得配置选项太麻烦，对于watchEffect，有一个便捷的替代品：watchPostEffect

import { watchPostEffect } from 'vue'

watchPostEffect(() => {
  /* 在 Vue 更新后执行 */
})

同步创建的侦听器会绑定在宿主组件实例上，并会在组件卸载时自动停止。

当异步创建了一个侦听器时，它不会被绑定到组件上，为了防止内存泄漏，需要手动停止。

watch和watchEffect函数存在一个返回值，是一个用于停止侦听器的函数：

const unwatch = watchEffect(() => {})

// ...当该侦听器不再需要时
unwatch()

尽量不要使用异步创建侦听器，如果需要等待异步数据，可以使用条件式的侦听逻辑：文章来源地址https://www.toymoban.com/news/detail-736818.html

// 需要异步请求得到的数据
const data = ref(null)

watchEffect(() => {
  if (data.value) {
    // 数据加载后执行某些操作...
  }
})

到了这里，关于[vue3] watch和watchEffect简记的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！