网站icp备案 年检网站如何快速被百度收录
一. watch
在有些情况下，我们需要在状态变化时执行一些操作，此时可以使用watch来实现这种效果，我们可以使用 watch 函数在每次响应式状态发生变化时触发回调函数。watch 的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组，但是注意：watch 直接侦听响应式对象的属性值。下面我们来看下它的用法
用法1：
<script setup>import {ref, watch} from "vue"const person = ref({name:"Jim",age:21})watch(person,(oldValue,newValue)=>{console.log("oldValue:"+oldValue)console.log("newValue:"+newValue)})
</script>用法2(推荐使用)：
watch(()=>person.value.name,(newValue)=>{console.log("newValue:"+newValue)
})用法3(比较耗性能，必要时才使用)：开启尝试侦听，立即侦听
watch(person,(newValue)=>{console.log(newValue)
},{deep:true,immediate:true})完整代码：
<template><view><input type="text" v-model="person.name" /></view>{{person}}
</template><script setup>import {ref, watch} from "vue"const person = ref({name:"Jim",age:21})// watch(person,(oldValue,newValue)=>{// console.log("oldValue:"+oldValue)// console.log("newValue:"+newValue)// })// watch(()=>person.value.name,(newValue)=>{// console.log("newValue:"+newValue)// })watch(person,(newValue)=>{console.log(newValue)},{deep:true,immediate:true})
</script><style lang="scss" scoped></style>需要侦听多个，推荐分开侦听：
//nv new value的缩写 新值 ov老值
watch(firstName,(nv,ov)=>{}watch(lastName,(nv,ov)=>{})二.watchEffect
watchEffect() 允许我们自动跟踪回调的响应式依赖,性能消耗较大，一般很少使用。
watchEffect(()=>{console.log(firstName.value,lastName.value)})三.watch vs. watchEffect
watch 和 watchEffect 都能响应式地执行侦听。它们之间的主要区别是追踪响应式依赖的方式：
-
watch只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。watch会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。 -
watchEffect，则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。