vue3-基础知识(3)- 侦听器
admin
2024-01-30 05:39:37
0次
- 处理副作用。默认情况下,用户创建的侦听器回调,都会在 Vue 组件更新之前被调用。
- watchEffect
立即执行,自动追踪函数内部依赖,变化则再次执行。
- watchEffect(fn) // 请求数据,从新请求。
- 代码简洁,但关系不明确。
- watch
懒依赖,精确控制。
- watch(ref,fn) // 一个ref
- watch(() => ref1.value + ref2.value, fn) // 多个ref组合值
- watch([ref1, ref2], fn) // 多个ref
- watch(() => reactive.props, fn) // reactive属性,深层嵌套(推荐)
- watch(() => reactive.props, fn, { deep: true }) // 强制深层(慎用)。
- 回调中访问更新后的dom
- 需要指明 flush: ‘post’
- 用后置刷新
watchPostEffect
替代
-
停止侦听器
侦听器必须用同步语句创建(会自动停止):如果用异步回调创建一个侦听器,那么它不会绑定到当前组件上,你必须手动停止它,以防内存泄漏
- 手动停止侦听器:
const unWatch = watchEffect(() => {}); unWatch()
- 异步侦听器(推荐)
// 需要异步请求得到的数据const data = ref(null)watchEffect(() => {if (data.value) {// 数据加载后执行某些操作...}})
相关内容