您好,登录后才能下订单哦!
本篇内容介绍了“Vue3中watchEffect侦听器如何使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
其实我觉得这个玩意儿哈,不用也罢,啊哈哈哈哈哈!
怎么说呢,你可以理解成 watch 和 watchEffect 这两个玩意儿的功能是一样的。
watch
:显示指定依赖源,依赖源更新时执行回调函数。watchEffect
:自动收集依赖源,依赖源更新时候重新执行自身。
watchEffect 如果存在的话,组件初始化的时候就会自动自行一次,不需要像 watch 一样设置立即执行。
watch 每次回调之后是可以获取到最新值和上一次的老值,但是 watchEffect 是拿不到的。
watchEffect 不需要指定监听的属性,他会自动进行依赖收集,只要我们回调中使用了响应式的属性,那么这些属性在变更之后这个回调都会执行,不像 watch 只能监听指定的属性。
使用的时候也是需要引入。
记住一点哈, watch 可以代替 watchEffect,但是 watchEffect 不能替代 watch。
总结:能用 watch 就不要用 watchEffect。
首先我们写一个简单的 watchEffect 侦听器。
<template> <div> <h2>{{name}}</h2> <button @click="btn">修改name</button> </div> </template> <script> import { ref, watchEffect } from "vue"; export default { name: "App", setup() { const name = ref("我是????????."); function btn() { name.value = "????????."; } const res = watchEffect(() => { console.log("watchEffect 执行了"); }); return { name, btn }; } }; </script>
记住 watchEffect 使用也是需要先引入的,不然不好使哈,然后我们保存上面的代码,然后刷新页面看一下执行结果。
我们发现哈,我们一刷新页面,控制台直接打印了我们输出的内容,所以说呢,watchEffect 组件一加载完就会执行。
我们看到,watchEffect 使用的时候并没有设置监听哪个参数,只有一个回调函数,因为他会自动进行依赖收集,只要我们回调中使用了响应式的属性,那么这些属性在变更之后这个回调都会执行。
比如我们监听 name 的情况。
<template> <div> <h2>{{name}}</h2> <button @click="btn">修改name</button> </div> </template> <script> import { ref, watchEffect } from "vue"; export default { name: "App", setup() { const name = ref("我是????????."); function btn() { name.value = "????????."; } const res = watchEffect(() => { console.log(name.value); }); return { name, btn }; } }; </script>
我们在回调函数打印一下 name 的值。
上面的案例是用来监听一个基本数据,如果监听一个对象呢?
其实也是一样的哈。
<template> <div> <h2>{{boy.age}}</h2> <button @click="boy.age++">修改name</button> </div> </template> <script> import { ref, watchEffect, reactive } from "vue"; export default { name: "App", setup() { const boy = reactive({ name: "我是????????.", age: 10 }); const res = watchEffect(() => { console.log(boy.age); }); return { boy }; } }; </script>
上边代码呢,一个按钮,每次点击让 boy 对象里面的 age 加一操作,然后监听一下 age 的新值
可以看到是完全没有问题的哈!
上边说过了哈,只要我们回调中使用了响应式的属性,那么这些属性在变更之后这个回调都会执行,不像 watch 只能监听指定的属性。
啥意思呢,简单理解一下,就是回调里面使用了的话他就执行,没用他就不执行。
就像上面的案例,修改 age 的时候,我们在回调里面打印了 age,在回调里面涉及到 age 了,他就会执行,如果我们这次不使用改变的 age,只打印一句话,看一下能不能执行回调哈。
<template> <div> <h2>{{boy.age}}</h2> <button @click="boy.age++">修改name</button> </div> </template> <script> import { ref, watchEffect, reactive } from "vue"; export default { name: "App", setup() { const boy = reactive({ name: "我是????????.", age: 10 }); const res = watchEffect(() => { console.log("执行了"); }); return { boy }; } }; </script>
刷新保存,点击按钮修改 age 的值,看一下控制台有没有打印 执行了
三个字。
明白那句话了吗?知道什么时候执行了吧? OK。
假设,我们开始使用了 watchEffect 监听,但是我现在不想让他监听了怎么办呢?其实超级简单。
const res = watchEffect(() => { console.log(boy.age); });
上边我们不是创建一个 watchEffect 侦听器了吗?关闭只需要调用一下就关了哈。
res() // 关闭
下面看具体代码。
<template> <div> <h2>{{boy.age}}</h2> <button @click="boy.age++">修改name</button> </div> </template> <script> import { ref, watchEffect, reactive } from "vue"; export default { name: "App", setup() { const boy = reactive({ name: "我是????????.", age: 10 }); const res = watchEffect(() => { console.log(boy.age); }); res() // 关闭监听 return { boy }; } }; </script>
保存一下,点击按钮看效果。
“Vue3中watchEffect侦听器如何使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。