目录vue3中watch与watchEffect的区别watch refwatch ReactivewatchEffect对比扩展:Vue3中的 watchEffect 和 watc
const x = ref(0)
const y = ref(0)
// 单个 ref
watch(x, (newX) => {
console.log(`x is ${newX}`)
})
// getter 函数
watch(
() => x.value + y.value,
(sum) => {
console.log(`sum of x + y is: ${sum}`)
}
)
// 多个来源组成的数组
watch([x, () => y.value], ([newX, newY]) => {
console.log(`x is ${newX} and y is ${newY}`)
})
// 提供一个 getter 函数
watch(
() => obj.count,
(count) => {
console.log(`count is: ${count}`)
},
// 立即执行
{ immediate: true }
)
注意,不要使用如下方式:
const obj = reactive({ count: 0 })
// 错误,因为 watch() 得到的参数是一个 number
watch(obj.count, (count) => {
console.log(`count is: ${count}`)
})
不用显式的定义要 watch 的参数
const todoId = ref(0)
watchEffect(async () => {
const response = await fetch(
`https://JSONplaceholder.typicode.com/todos/${todoId.value}`
)
data.value = await response.json()
})
todoId 的值改变了才触发
watch 和 watchEffect 都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式:
watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外,仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖,因此,我们能更加精确地控制回调函数的触发时机。
watchEffect,则会在副作用发生期间追踪依赖。它会在同步执行过程中,自动追踪所有能访问到的响应式属性。这更方便,而且代码往往更简洁,但有时其响应性依赖关系会不那么明确。
一般的副作用就是说这个函数做了不属于它应该做的事,比如console.log,或者它修改了其他的外部变量之类的。
react中的函数组件要求必须是纯函数也就是没有副作用的函数,就是因为这个函数会被很多次调用,如果有副作用比如修改了全局变量,那么将无法控制该变量的准确性。(react hooks 函数组件中的生命周期函数就是副作用)
vue里面一般就是说,一些当状态改变时需要执行的行为,比如在每次msg变量改变时我需要重新打印它,那么这个打印行为就可以说是一个副作用(effect)
vue3 新增的 Composition api中的 watchEffect 和 watch
都可在 setup() 函数中使用
watchEffect:
1.它是立即执行的,在页面加载时会主动执行一次,来收集依赖
2.不需要传递需要侦听的内容,它可以自动感知代码依赖,只需要传递一个回调函数
3.它不能获取之前数据的值
4.它的返回值用来停止此监听
例:
setup() {
const { reactive, watchEffect } = vue;
const data = reactive({ name:'lei' })
const stop = watchEffect( () => { // 返回值 stop 用来停止监听
console.log( data.name ) // 页面加载时执行一次之后,当 data.name 改变时,将会再次执行log
setTimeout( () => {
stop(); //5秒之后停止此监听
}, 5000 )
})
}
watch : (watch也可以在setup中使用)
1.具备一定的惰性 lazy ( 但可配置 immediate , 使其主动)
2.参数可拿到更改之前的值和更改之后的值
3.可以侦听多个数据的变化,用一个侦听器承载
例:
const { reactive, watch, ref } = vue;
const name = ref('yang')
// ref包装过的可直接通过watch的第一个参数传入
watch( name, (newValue,oldValue) => { // 第一个参数 需要监听的数据
console.log(newValue) // 新值
console.log(newValue) // 旧值
},{ immediate: true }) // 第三个参数可接受配置项
const data = reactive({ name:'lei', age:18 })
// 但是 reactive 包装过的值不可以直接传入,可使用箭头函数 return 出需要监听的数据
watch( () => data.name, (newValue,oldValue) => { // 第一个参数 需要监听的数据
console.log(newValue) // 新值
console.log(newValue) // 旧值
},{ immediate: true }) // 第三个参数可接受配置项
上边说到可以侦听多个数据的变化,用一个侦听器承载,接着看
例:
const data = reactive({ name:'lei', age:18 })
// 可用数组接收参数
watch( [() => data.name, () => data.age], ([newName, newAge], [oldName, oldAge]) => {
console.log(newName, newAge) // 新值
console.log(oldName, oldAge) // 旧值
})
具体需要用 watch 还是 watchEffect 就看业务需求啦
到此这篇关于vue3中watch与watchEffect的区别的文章就介绍到这了,更多相关vue3 watch与watchEffect的区别内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: vue3中watch与watchEffect的区别
本文链接: https://www.lsjlt.com/news/196554.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0