东营网站建设那家好,廊坊小程序公司,企业建网站需要准备哪些资料呢,wordpress 页面模板 自定义watch watchEffect 函数都是监听器, 用于监视数据的变化; watch 有惰性#xff0c;watchEffect 无惰性#xff1b;watch 需要指定具体的监视属性#xff0c;watchEffect 不需要指定具体的监视属性和配置参数#xff0c;会自动感知代码依赖#xff1b;watch 能获取到… watch watchEffect 函数都是监听器, 用于监视数据的变化; watch 有惰性watchEffect 无惰性watch 需要指定具体的监视属性watchEffect 不需要指定具体的监视属性和配置参数会自动感知代码依赖watch 能获取到以前的旧值和新值watchEffect 只能拿到最新值 一、watch 监听
1、watch 监视 ref 所定义的单个响应式数据
script setup
import { watch, computed } from vue
const num ref(11)watch(// 监视的数据监视 ref 所定义的单个响应式数据num,// 监视回调函数(newVal, oldVal) {console.log(newVal, oldVal)},// 监视配置immediate 的默认值是 false当值为 true 表示立即执行 deep 表示是否深度监听这里的 deep 无意义{ immediate: true, deep: true }
)
script2、watch 监视 computed 计算属性
script setup
import { watch, computed } from vue
const start ref(1)
const end computed(() start.value 1)watch(// 监视的数据监视 computed 计算属性end,// 监视回调函数(newVal, oldVal) {console.log(newVal, oldVal)},// 监视配置immediate 的默认值是 false当值为 true 表示立即执行 deep 表示是否深度监听这里的 deep 无意义{ immediate: true, deep: true }
)
script3、watch 监视 getter 函数
script setup
import { watch, computed } from vue
const messages ref(this is a mesage)watch(// 监视的数据监视 getter 函数() 返回的消息 messages.value,// 监视回调函数(newVal, oldVal) {console.log(newVal, oldVal)},// 监视配置immediate 的默认值是 false当值为 true 表示立即执行 deep 表示是否深度监听这里的 deep 无意义{ immediate: true, deep: true }
)
script4、watch 监视由 ref、computed、getter函数 等任意类型组成的数组
script setup
import { watch, computed } from vue
const msg ref(this is a msg)
const n ref(1)
const count computed(() n.value 1)watch(// 监视的数据监视由 ref、computed、getter函数 等任意类型组成的数组[msg, n, count, () n.value count.value],// 监视的回调函数(newVal, oldVal) {console.log(newVal, oldVal)},// 监视配置immediate 的默认值是 false当值为 true 表示立即执行 deep 表示是否深度监听这里的 deep 无意义{ immediate: true, deep: true }
)
script5、watch 监视 reactive 所定义的响应式对象, deep 深度监听默认强制开启即使监听设置 deep:false 也无效回调里很难正确的获得 oldValue, 回调的 newVal 和 oldVal 是相同的
script setup
import { watch, reactive } from vue
const obj reactive({name: bob,age: 18
})watch(// 监视的数据监视 reactive 所定义的响应式对象obj,// 监视的回调函数 newVal 和 oldVal 是相同的(newVal, oldVal) {console.log(newVal, oldVal)},// 监视配置immediate 的默认值是 false当值为 true 表示立即执行 deep 表示是否深度监听这里的 deep 强制开启即使手动设置 false 也无效{ immediate: true, deep: false }
)
script6、watch 监视 reactive 所定义的响应式对象的某个属性
script setup
import { watch, reactive } from vue
const obj reactive({name: bob,age: 18,sex: 男,score: 90,info: {meta: meta}
})watch(// 监视的数据监视 reactive 所定义的响应式对象属性 name, 注意这里要用 getter 函数的形式书写如果直接写 obj.name 则无效() obj.name,// 监视的回调函数(newVal, oldVal) {console.log(newVal, oldVal)}
)watch(// 监视的数据监视 reactive 所定义的响应式对象属性 age, 注意这里要用 getter 函数的形式书写如果直接写 obj.age 则无效 () obj.age,// 监视的回调函数(newVal, oldVal) {console.log(newVal, oldVal)}
)watch(// 监视的数据监视 reactive 所定义的响应式对象多个属性[() obj.sex, () obj.score],// 监视的回调函数(newVal, oldVal) {console.log(newVal, oldVal)}
)watch(// 监视的数据监视 reactive 所定义的响应式对象属性 info, 注意这里要用 getter 函数的形式书写如果直接写 obj.info 则无效 () obj.info,// 监视的回调函数(newVal, oldVal) {console.log(newVal, oldVal)},// 监视配置immediate 的默认值是 false当值为 true 表示立即执行 deep 表示是否深度监听这里的 deep 需要开启因为 obj.info 是一个对象如果不开启无法深度监听{ immediate: true, deep: true }
)
script7、watch 停止监听 重启监听
script setup langts
import { watch, reactive } from vue
const visible refboolean(false)let stopWatch watch(visible,(newVal, oldVal) {console.log(newVal, oldVal)},{ immediate: true, deep: true }
)
// 停止监听: 将 watch 赋值给一个变量当达到条件时就调用这个变量来停止监听
setTimeout(() {stopWatch()
}, 3000)// 重启监听 将监听器重新赋值给变量
stopWatch watch(visible,(newVal, oldVal) {console.log(newVal, oldVal)},{ immediate: true, deep: true }
)
script
二、watchEffect 监听
script setup
import { watchEffect, computed, ref,reactive } from vue
const obj reactive({ name: bob, age: 18 })
const n ref(1)
const msg () n.value 1
const count computed(() n.value 1)// 只要 watchEffect 中涉及到数据发生变化就会执行此回调
watchEffect(() {const objName obj.name.valueconst nValue n.valueconst msgValue msg.valueconst countValue count.value
})// 取消监听
const stop watchEffect(() {const objName obj.name.valueconst nValue n.valuesetTimeout(() {stop()}, 5000)
})// 重启监听
const stop watchEffect(() {const objName obj.name.valueconst nValue n.value
})
script对比
对比是否有惰性参数获得值watch有惰性数值再次改变后执行监听函数可以侦听多个数据的变化versions参数可以拿到当前值和原始watchEffect立即执行没有惰性不需要传递侦听内容自动感知代码依赖不需要传递到很多参数不能获取原始值
