一文搞懂Vue3中watchEffect侦听器的使用
上一节我们学习了 watch 侦听器的基础用法，用来监听页面数据的变化，那么今天呢，我们来学习一下 watch 侦听器的好兄弟 watchEffect 侦听器。这个相对来说比较简单，用的不是很多，当然了，根据自己的项目情况自行决定使用。这个就不详细说了，简单过一下子。
watchEffect 侦听器
其实我觉得这个玩意儿哈，不用也罢，啊哈哈哈哈哈！
怎么说呢，你可以理解成 watch 和 watchEffect 这两个玩意儿的功能是一样的。
watch：显示指定依赖源，依赖源更新时执行回调函数。watchEffect：自动收集依赖源，依赖源更新时候重新执行自身。
- watchEffect 如果存在的话，组件初始化的时候就会自动自行一次，不需要像 watch 一样设置立即执行。
- watch 每次回调之后是可以获取到最新值和上一次的老值，但是 watchEffect 是拿不到的。
- watchEffect 不需要指定监听的属性，他会自动进行依赖收集，只要我们回调中使用了响应式的属性，那么这些属性在变更之后这个回调都会执行，不像 watch 只能监听指定的属性。
- 使用的时候也是需要引入。
- 记住一点哈， watch 可以代替 watchEffect，但是 watchEffect 不能替代 watch。
总结：能用 watch 就不要用 watchEffect。
watchEffect 侦听器使用
首先我们写一个简单的 watchEffect 侦听器。
<template>
<div>
<h1>{{name}}</h1>
<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 监听基本数据
我们看到，watchEffect 使用的时候并没有设置监听哪个参数，只有一个回调函数，因为他会自动进行依赖收集，只要我们回调中使用了响应式的属性，那么这些属性在变更之后这个回调都会执行。
比如我们监听 name 的情况。
<template>
<div>
<h1>{{name}}</h1>
<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 的值。
watchEffect 监听复杂数据
上面的案例是用来监听一个基本数据，如果监听一个对象呢？
其实也是一样的哈。
<template>
<div>
<h1>{{boy.age}}</h1>
<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 的新值
可以看到是完全没有问题的哈！
watchEffect 啥时候执行
上边说过了哈，只要我们回调中使用了响应式的属性，那么这些属性在变更之后这个回调都会执行，不像 watch 只能监听指定的属性。
啥意思呢，简单理解一下，就是回调里面使用了的话他就执行，没用他就不执行。
就像上面的案例，修改 age 的时候，我们在回调里面打印了 age，在回调里面涉及到 age 了，他就会执行，如果我们这次不使用改变的 age，只打印一句话，看一下能不能执行回调哈。
<template>
<div>
<h1>{{boy.age}}</h1>
<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 监听
假设，我们开始使用了 watchEffect 监听，但是我现在不想让他监听了怎么办呢？其实超级简单。
const res = watchEffect(() => {
console.log(boy.age);
});
上边我们不是创建一个 watchEffect 侦听器了吗？关闭只需要调用一下就关了哈。
res() // 关闭
下面看具体代码。
<template>
<div>
<h1>{{boy.age}}</h1>
<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>保存一下，点击按钮看效果。
好了，watchEffect 侦听器基本有法就这样了，没什么难的，所以说很多人都说，哎哟，这个 watchEffect 没什么屁用啊！确实用处不大，但是也不绝对哈，不然作者就不至于在 watch 之外有整一个 watchEffect 了是吧！ 但是具体什么用，等你做项目过程中，就知道了！但是，能用 watch 解决的，就不要用 watchEffect ！
到此这篇关于一文搞懂Vue3中watchEffect侦听器的使用的文章就介绍到这了,更多相关Vue3 watchEffect侦听器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了基于vue2.0实现简单轮播图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
本文主要介绍了Vue实现登录功能全套详解（含封装axios），文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了vue指令与$nextTick 操作DOM的不同之处,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
Vue表单绑定的实例代码（单选按钮,选择框（单选时,多选时,用 v-for 渲染的动态选项）
本文通过实例代码给大家介绍了Vue表单绑定（单选按钮，选择框（单选时，多选时,用 v-for 渲染的动态选项）的相关知识，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了阿望教你用vue写扫雷小游戏，本文通过实例代码效果图展示的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-01
本篇文章主要介绍了详解vue + vuex + koa2开发环境搭建及示例开发，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期2022-11-11
vue3+vite多项目多模块打包(基于vite-plugin-html插件)
这篇文章主要给大家介绍了关于vue3+vite基于vite-plugin-html插件实现多项目多模块打包的相关资料,现在很多小伙伴都已经使用Vite+Vue3开发项目了,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-07-07
这篇文章主要为大家介绍了使用v-memo缓存模板子树提高应用性能详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了vueCli4如何配置vue.config.js文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
最新评论