vue3学习-侦听器watch

侦听器

  1. 可侦听 一个 ref,包括计算属性、一个响应式对象、一个 getter 函数、或多个数据源组成的数组
js 复制代码
import { watch,ref } from 'vue'

# 单个ref
let a = ref('')
watch(a, (new, old) => {})

#getter函数
let a = ref(1)
let b = ref(2)
watch(
() => a.value + b.value,
(new, old) => { console.log(new, old) } //4 , 3
)
a.value = 2

# 多个来源组成的数组
watch([x, () => y.value], ([newX, newY],[oldX, oldY]) => {
    console.log(`x is ${newX} and y is ${newY}`)
}

注意: 不能直接侦听响应对象的属性值

需要用一个返回该属性的getter函数

js 复制代码
# 错误
watch(obj.count,() => {})
# 正确
watch(() => obj.count, () => {})

深层侦听器

直接给 watch传入一个响应对象,会隐式的创建一个深层侦听器。

js 复制代码
watch(obj, (new, old) => {})

相比之下,返回对象getter函数,只有再返回不同的对象时,才会触发回调

js 复制代码
watch(() => state.someObject,() =>{})//仅当 state.someObject 被替换时触发

可以给上面这个例子显式地加上 deep 选项,强制转成深层侦听器

js 复制代码
watch(
    ()=>obj.someObject,
    (newValue, oldVlaue)=>{}
    {deep: true}
)

即时回调的侦听器

再创建侦听器时,立即执行一遍回调。

js 复制代码
watch(a, (new, old) => {}, {immediate: true})

watchEffect()

自动跟踪回调的响应式以来

js 复制代码
watch(a, (new, old) => {console.log(a)},)
#等价于
watch(() => {console.log(a)})

watch vs. watchEffect

  1. watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。
  2. 仅在数据源确实改变时才会触发回调。
  3. watchEffect,则会在副作用发生期间追踪依赖。自动追踪所有能访问到的响应式属性。
  4. 有时其响应性依赖关系会不那么明确。

回调的触发时机

默认情况下,用户创建的侦听器回调,都会在 Vue 组件更新之前被调用。这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。

如果想在侦听器回调中能访问被 Vue 更新之后 的 DOM,你需要指明 flush: 'post'

js 复制代码
watchEffect(callback, {flush: 'post'})

停止侦听器

组件卸载时自动停止(在 setup() 或 `` 中用同步语句创建的侦听器)
侦听器必须用同步语句创建:如果用异步回调创建一个侦听器,那么它不会绑定到当前组件上,你必须手动停止它,以防内存泄漏。

  1. 手动停止方法
js 复制代码
unwatch()
相关推荐
千忧散6 分钟前
Unity Socket学习笔记 (三)TCP&UDP
笔记·学习·unity·c#
今天只学一颗糖33 分钟前
Linux学习笔记--触摸屏驱动
笔记·学习
半路程序员1 小时前
Go语言学习(四)
开发语言·学习·golang
蒙奇D索大2 小时前
【C语言加油站】C语言文件操作详解:从“流”的概念到文件的打开与关闭
c语言·开发语言·笔记·学习·改行学it
数据库生产实战2 小时前
Oracle LOB使用入门和简单使用,提供学习用的测试用例!
数据库·学习·oracle
爱喝水的鱼丶3 小时前
SAP-ABAP:SAP中的用户确认对话框:深入理解与实践POPUP_TO_CONFIRM
运维·开发语言·学习·sap·abap
徐小夕3 小时前
花了4个月时间,我写了一款支持AI的协同Word文档编辑器
前端·vue.js·后端
lingggggaaaa3 小时前
小迪安全学习笔记(一百零二讲)—— 漏扫项目篇&PoC开发&Yaml语法&插件一键生成&匹配结果&交互提取
笔记·学习·安全·网络安全·交互
里昆3 小时前
【COMSOL】结构力学仿真(压缩弹性体)案例心得
学习
肥肠可耐的西西公主4 小时前
后端(JavaWeb)学习笔记(CLASS 2):SpringBootWeb入门
笔记·学习