设计网站公司咨询亿企邦,wordpress 中文文件重命名,1000元能否做网站,优秀网站设计有哪些在Vue 3的watch函数中#xff0c;第三个参数是一个配置对象#xff0c;用于定义如何执行watch函数。下面是几个常用的配置项的讲解#xff0c;并附上代码示例#xff1a;
1、immediate immediate#xff1a;当设置为true时#xff0c;会在初始渲染时立即执行watch函数。…在Vue 3的watch函数中第三个参数是一个配置对象用于定义如何执行watch函数。下面是几个常用的配置项的讲解并附上代码示例
1、immediate immediate当设置为true时会在初始渲染时立即执行watch函数。默认为false。
// 示例代码
watch(count,(newCount, oldCount) {console.log(new count: ${newCount}, old count: ${oldCount})},{immediate: true}
)2、deep deep当设置为true时会深度遍历监听对象的所有属性。默认为false。
// 示例代码
const state reactive({obj: { a: 1, b: 2 },arr: [1, 2, 3]
})
watch(() state.obj,(newObj, oldObj) {console.log(new obj: ${JSON.stringify(newObj)}, old obj: ${JSON.stringify(oldObj)})},{deep: true}
)3、flush 在Vue3中watch函数的第三个参数是可选的配置项其中一个配置项是flush它控制何时运行watch的回调函数。flush有三个选项pre、post和sync。
3.1、pre 在侦听器的回调函数运行之前立即运行更新函数即在dom渲染完毕前调用回调函数此时获取不到DOM。这是默认值。
watch(() count.value,() {console.log(watcher callback);},{ flush: pre }
);3.2、post 在侦听器的回调函数运行之后立即运行更新函数即在下一次DOM更新之后执行。
watch(() count.value,() {console.log(watcher callback);},{ flush: post }
);3.3、sync 在更改被触发时立即运行侦听器的回调函数和更新函数这是非常明确和强制的选项。
watch(() count.value,() {console.log(watcher callback);},{ flush: sync }
);在大多数情况下不需要指定flush选项因为默认的行为通常足够了。但是对于一些需要更精确控制的场景flush可以是一个非常有用的配置项。
4、onTrack和onTrigger 用于跟踪和调试响应式对象属性的访问和修改。onTrack和onTrigger可以帮助我们更好地理解和追踪响应式数据的读取和修改操作更好地进行调试和开发。
4.1、onTrack onTrack选项会在我们读取响应式数据时被触发我们可以在该函数中做一些记录或者打印日志的操作。例如
const state reactive({count: 0,
})watch(() state.count,(count, prevCount) {console.log(count changed from ${prevCount} to ${count})},{onTrack: (event) {console.log(The ${event.key} key is being read)},}
)在这个例子中我们在watch函数的第三个参数中配置了onTrack选项然后在控制台输出了响应式数据读取的相关信息。
4.2、onTrigger onTrigger选项会在响应式数据被修改时被触发我们可以在该函数中做一些特殊的处理。例如
const state reactive({count: 0,
})watch(() state.count,(count, prevCount) {console.log(count changed from ${prevCount} to ${count})},{onTrigger: (event) {console.log(The ${event.key} key is being set to ${event.value})},}
)在这个例子中我们在watch函数的第三个参数中配置了onTrigger选项然后在控制台输出了响应式数据修改的相关信息。 5、总结 这些是watch函数的第三个参数的一些常见配置选项。您可以根据需要选择适当的配置来满足您的需求。
