vue3中响应式侦听
发布于2021-12-05 19:13 阅读(704) 评论(0) 点赞(15) 收藏(4)
vue3提供了两个函数来侦听数据源的变化：watch和watchEffect
watch需要监听某个数据源，然后执行具体的回调函数，可监听单个数据源，也可以把多个值放在一个数组中进行侦听，最后的值也以数组形式返回。
watchEffect和watch的区别：
1.watchEffect不需要手动传入依赖
2.每次初始化时watchEffect都会执行一次回调函数来自动获取依赖
3.watchEffect无法获取到原值，只能得到变化后的值
- <template>
- <div class="about">
- <h1>This is an about page</h1>
- </div>
- </template>
- <script>
- import { reactive, ref,watch, watchEffect } from "vue";
- export default {
- setup() {
- let num1 = ref(1);
- let num2 = reactive({
- year: 2021,
- });
- // 监听单个数据源
- watch(()=>num2.year,(newVal,oldVal)=>{
- console.log(newVal,oldVal);
- })
- // 监听多个数据源
- watch([()=>num2.year,num1],(newVal,oldVal)=>{
- console.log(newVal,oldVal);
- // 打印结果：[2022, 2][2021, 1]
- })
- // watchEffect和watch的区别：
- // 1.watchEffect不需要手动传入依赖
- // 2.每次初始化时watchEffect都会执行一次回调函数来自动获取依赖
- // 3.watchEffect无法获取到原值，只能得到变化后的值
- watchEffect(() => {
- console.log(num1.value);
- console.log(num2.year);
- });
-
- setInterval(() => {
- num1.value=2;
- num2.year=2022;
- }, 2000);
-
- return {
- num1,
- num2,
- };
- },
- };
- </script>
stop 停止监听,我们在组件中创建的watch监听，会在组件被销毁时自动停止。如果在组件销毁之前我们想要停止掉某个监听， 可以调用watch()函数的返回值
- setup() {
- let num1 = ref(1);
- let num2 = reactive({
- year: 2021,
- });
-
- const stop = watch([num1, () => num2.year], (newVal, oldVal) => {
- console.log(newVal, oldVal);
- // 打印结果：[2022, 2][2021, 1]
- });
- function jia() {
- num1.value++;
- num2.year++;
- }
- // 3秒后停止监听
- setInterval(() => {
- stop();
- }, 3000);
原文链接:https://blog.csdn.net/weixin_58347102/article/details/121679508
所属网站分类: 技术文章 > 博客
作者：西小口到了吗
链接：http://www.qianduanheidong.com/blog/article/248513/19b3ad803dae3402466f/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力