这篇文章主要介绍“Vue3中watchEffect侦听器怎么使用”，在日常操作中，相信很多人在Vue3中watchEffect侦听器怎么使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue3中watchEffect侦听器怎么使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站设计制作、成都网站设计、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的路南网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！
watchEffect 侦听器
怎么说呢，你可以理解成 watch 和 watchEffect 这两个玩意儿的功能是一样的。
watch：显示指定依赖源，依赖源更新时执行回调函数。
watchEffect：自动收集依赖源，依赖源更新时候重新执行自身。
watchEffect 如果存在的话，组件初始化的时候就会自动自行一次，不需要像 watch 一样设置立即执行。
watch 每次回调之后是可以获取到最新值和上一次的老值，但是 watchEffect 是拿不到的。
watchEffect 不需要指定监听的属性，他会自动进行依赖收集，只要我们回调中使用了响应式的属性，那么这些属性在变更之后这个回调都会执行，不像 watch 只能监听指定的属性。
使用的时候也是需要引入。
记住一点哈， watch 可以代替 watchEffect，但是 watchEffect 不能替代 watch。
总结：能用 watch 就不要用 watchEffect。
watchEffect 侦听器使用
首先我们写一个简单的 watchEffect 侦听器。
{{name}}
修改name
记住 watchEffect 使用也是需要先引入的，不然不好使哈，然后我们保存上面的代码，然后刷新页面看一下执行结果。
我们发现哈，我们一刷新页面，控制台直接打印了我们输出的内容，所以说呢，watchEffect 组件一加载完就会执行。
watchEffect 监听基本数据
我们看到，watchEffect 使用的时候并没有设置监听哪个参数，只有一个回调函数，因为他会自动进行依赖收集，只要我们回调中使用了响应式的属性，那么这些属性在变更之后这个回调都会执行。
比如我们监听 name 的情况。
{{name}}
修改name
我们在回调函数打印一下 name 的值。
watchEffect 监听复杂数据
上面的案例是用来监听一个基本数据，如果监听一个对象呢？
其实也是一样的哈。
{{boy.age}}
修改name
上边代码呢，一个按钮，每次点击让 boy 对象里面的 age 加一操作，然后监听一下 age 的新值
可以看到是完全没有问题的哈！
watchEffect 啥时候执行
上边说过了哈，只要我们回调中使用了响应式的属性，那么这些属性在变更之后这个回调都会执行，不像 watch 只能监听指定的属性。
啥意思呢，简单理解一下，就是回调里面使用了的话他就执行，没用他就不执行。
就像上面的案例，修改 age 的时候，我们在回调里面打印了 age，在回调里面涉及到 age 了，他就会执行，如果我们这次不使用改变的 age，只打印一句话，看一下能不能执行回调哈。
{{boy.age}}
修改name
刷新保存，点击按钮修改 age 的值，看一下控制台有没有打印 执行了 三个字。
明白那句话了吗？知道什么时候执行了吧？ OK。
关闭 watchEffect 监听
假设，我们开始使用了 watchEffect 监听，但是我现在不想让他监听了怎么办呢？其实超级简单。
const res = watchEffect(() => {
console.log(boy.age);
});上边我们不是创建一个 watchEffect 侦听器了吗？关闭只需要调用一下就关了哈。
res() // 关闭
下面看具体代码。
{{boy.age}}
修改name
保存一下，点击按钮看效果。
到此，关于“Vue3中watchEffect侦听器怎么使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！
本文题目：Vue3中watchEffect侦听器怎么使用
本文路径：
http://jkwzsj.com/article/gisppd.html
