vue3中watch和watchEffect使用实例分析

watch

watch监听单个数据

    import { ref, watch } from 'vue'const text1 = ref('')watch(text1, (newVal, oldVal) => {    console.log('监听单个数据', newVal, oldVal)})

登录后复制

watch监听多个数据

        import { ref, watch } from 'vue'const text1 = ref('')const text2 = ref('')watch([text1, text2], (newVal, oldVal) => {    console.log('监听一组数据', newVal, oldVal)})

登录后复制

watch监听对象

    name:     age: import { reactive, watch } from 'vue'const student = reactive({    name: '',    age: ''})watch(student, (newVal, oldVal) => {    console.log('newVal', newVal)    console.log('oldVal', newVal)})

登录后复制

 watch还有第三个参数,deep和immediate,可以加上看看效果

watch监听对象的某一个值

    name:     age: import { reactive, watch } from 'vue'const student = reactive({    name: '',    age: ''})watch(() => student.name, (newVal, oldVal) => {    console.log('newVal', newVal)    console.log('oldVal', newVal)}, {    deep: true,    immediate: true})

登录后复制

监听对象某一个属性的时候需要用箭头函数 

watchEffect

关于watchEffect,官网是这么介绍的:为了根据响应式状态自动应用和重新应用副作用,我们可以使用watchEffect方法,它立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。 也就是说,我们并不需要传入一个特定的依赖源,而且它会立即执行一遍回调函数,如果函数产生了副作用,那它就会自动追踪副作用的依赖关系,自动分析出响应源。光看概念可能比较模糊,先来看个最简单的例子:

    name:     age: import { reactive, watchEffect } from 'vue'const student = reactive({    name: '',    age: ''})watchEffect(() => {    console.log('name: ',student.name, 'age: ', student.age)})

登录后复制

watchEffect副作用

副作用,那什么是副作用呢,其实很简单,就是在监听之前,我得做一件事。

    name:     age:     

{{student.name}}

import { reactive, watchEffect } from 'vue'const student = reactive({ name: '', age: ''})watchEffect((oninvalidate) => { oninvalidate(() => { student.name = '张三' }) console.log('name: ', student.name)}, { // pre 组件更新前; sync:强制效果始终同步; post:组件更新后执行 flush: 'post' // dom加载完毕后执行})

登录后复制

监听之前让student.name赋值为’张三’,无论你输入什么值,name一直都是’张三’

立即学习“前端免费学习笔记(深入)”;

停止监听

我们用同步语句创建的监听器,会自动绑定到组件实例上,并且会在组件卸载时自动停止,但是,如果我们在异步回调里创建一个监听器,那它就不会绑定到当前组件上,必须手动去停止,防止内存泄漏。 那怎么去停止呢,其实我们只需要调用一下watch或watchEffect返回的函数

const stop = watchEffect(() => {})// 停止监听unwatch()

登录后复制

区别

用了一遍watch和watchEffect之后,发现他俩主要有以下几点区别:

watch是惰性执行的,而watchEffect不是,不考虑watch第三个配置参数的情况下,watch在组件第一次执行的时候是不会执行的,只有在之后依赖项变化的时候再执行,而watchEffect是在程序执行到此处的时候就会立即执行,而后再响应其依赖变化执行。

watch需要传递监听的对象,watchEffect不需要

以上就是vue3中watch和watchEffect使用实例分析的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3230199.html

(0)
上一篇 2025年4月1日 16:30:18
下一篇 2025年4月1日 16:30:26

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论