首页 > 其他分享 >vue3 watch 监听 flush post 作用?

vue3 watch 监听 flush post 作用?

时间:2023-04-06 16:56:47浏览次数:54  
标签:Vue DOM vue3 watch watchEffect flush 组件 ref

副作用刷新时机
Vue 的响应性系统会缓存副作用函数,并异步地刷新它们,这样可以避免同一个“tick”中多个状态改变导致的不必要的重复调用。

同一个“tick”的意思是,Vue的内部机制会以最科学的计算规则将视图刷新请求合并成一个一个的"tick",每个“tick”刷新一次视图,比如a=1;b=2;只会触发一次视图刷新。$nextTick的Tick就是指这个。

继续说,比如有个watchEffect监听了2个变量a和b,我的业务写了a=1;b=2;,你觉得监听器会调用2次?当然不会,Vue会合并成1次去执行,代码如下,console.log只会执行一次:

<template>
  <div>
    <button
      @click="
        r++;
        s++;
      "
    >
      {{ r }} - {{ s }}
    </button>
  </div>
</template>
 
<script>
import { ref, watchEffect } from 'vue';
export default {
  setup() {
    let r = ref(2);
    let s = ref(10);
    watchEffect(() => {
      console.log(r.value, s.value);
    });
    return {
      r,
      s,
    };
  },
};
</script>

在核心的具体实现中,组件的update函数也是一个被侦听的副作用。当一个用户定义的副作用函数进入队列时,默认情况下,会在所有的组件update前执行。

所谓组件的update函数是Vue内置的用来更新DOM的函数,它也是副作用。这时候有一个问题,就是默认下,Vue会先执行组件DOM update,还是先执行监听器?测一下

<template>
  <div>
    <button
      id="aa"
      @click="
        r++;
        s++;
      "
    >
      {{ r }} - {{ s }}
    </button>
  </div>
</template>
 
<script>
import { ref, watchEffect } from 'vue';
export default {
  setup() {
    let r = ref(2);
    let s = ref(10);
    watchEffect(
      () => {
        console.log(r.value, s.value);
        console.log(document.querySelector('#aa') && document.querySelector('#aa').innerText);
      }
    );
    return {
      r,
      s,
    };
  },
};
</script>

点击若干次(比如2次)按钮,得到的结果是:

 

 

 

为什么点之前按钮的innerText打印null?因为事实就是默认先执行监听器,然后更新DOM,此时DOM还未生成,当然是null。

当我第1和2次点击完,你会发现,document.querySelector('#aa').innerText获取到的总是点击之前DOM的内容。这也说明,默认Vue先执行监听器,所以取到了上一次的内容,然后执行组件update。

Vue 2其实也是这种机制,Vue 2使用this.$nextTick()去获取组件更新完成之后的DOM,在watchEffect里就不需要用this.$nextTick()(也没法用),有一个办法能获取组件更新完成之后的DOM,就是使用:

watchEffect(
  () => {
    /* ... */
  },
  {
    flush: 'post'
  }
)

现在设上flush配置项,重新进入组件,再看看:

 

 所以结论是,如果要操作“更新之后的DOM”,就要配置flush: 'post'。


————————————————
转自:本文为CSDN博主「但加木」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_46105875/article/details/119916064

 

watchPostEffect()

watchEffect() 使用 flush: 'post' 选项时的别名。

watchEffect 官方文档

watch 官方文档

标签:Vue,DOM,vue3,watch,watchEffect,flush,组件,ref
From: https://www.cnblogs.com/beileixinqing/p/17293322.html

相关文章

  • vue3中 toRefs和 toRef 的区别
    toRefs是为了避免对一个响应式对象解构的时候,解构后的每个属性不具有响应性toRef是为了针对单独获取某个对象的属性的时候保持响应性,从而单独对某个对象的属性进行响应式转化针对reactive或者ref创建的响应式对象都可以使用这两个api进行转化注意:toRefs只能对第一层......
  • vue3中路由错误自动跳转404页面 路由表写法
    定义路由表import{createRouter,createWebHashHistory}from"vue-router";constroutes=[ { path:"/", name:"home", component:Home, },//... { path:"/404", name:"404", component:()=&......
  • Vue3.0学习(一)------Vue简单介绍
    什么是Vue?官方原文:Vue是一款用于构建用户界面的JavaScript框架。它基于标准的HTML、CSS和JavaScript构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。简单来说,Vue就是一个构建用户界面的前端框架Vue的两个核心功能声明式渲染Vue基于标准HTML扩展了一......
  • D. Watch the Videos
    https://codeforces.com/problemset/problem/1765/D观察找规律最大的和二分最小的,然后交替相邻,看是否合法找到最长的合法段答案就是总长度减去合法段加上原先的长度#include<bits/stdc++.h>#definedebug1(a)cout<<#a<<'='<<a<<endl;#definedebug2(a,b)cout<<#a<......
  • 第四十七篇 vue - vue2 和 vue3 的对比
    vue2和vue3不同点汇总1、生命周期2、多根节点3、CompositionApi4、异步组件5、响应式原理6、Teleport7、虚拟Dom8、事件缓存9、Diff算法优化10、打包优化11、TypeScript支持生命周期1、Vue3生命周期整体上变化不大,Vue3在大部分生命周期钩子名称......
  • #yyds干货盘点#【愚公系列】2023年04月 .NET CORE工具案例-性能监控工具WatchDog的使
    前言所谓日志(Log)是指系统所指定对象的某些操作和其操作结果按时间有序的集合。每个日志文件由日志记录组成,每条日志记录描述了一次单独的系统事件。通常情况下,系统日志是用户可以直接阅读的文本文件,其中包含了一个时间戳和一个信息或者子系统所特有的其他信息。日志文件为服务器......
  • vue数组和对象进行 watch 和 watchEffect 对比
    constarr1=ref([]);constarr2=reactive([]);constobj1=ref({});constobj2=reactive({});watchEffect(()=>{console.log("watchEffectarr1",arr1.value);console.log("watchEffectarr2",arr2)......
  • 如何在vue3获取 DOM 元素
    获取dom的ref元素名称,要对应暴露的名称,不然会出现无效的dom报错,也就是拿到的是null在setup中,使用ref(null)获取dom不能直接在setup里面拿到dom的值,因为setup对应的生命周期是created,所以必须在后续的生命周期钩子里面拿到,比如onMounted注意:ref不要加冒号,直接写dom元素名称......
  • Vue3——使用deep进行样式穿透的时候发出v-deep警告
    前言其实只是一个警告,如果你不在意也是可以的,不过有点强迫症就按着提示说的改了,然后又去官网看了下对应的文档;!>::v-deepusageasacombinatorhasbeendeprecated.Use:deep()instead.这里没啥好说的,因为Vue3的文档中有对应的解释组件作用域CSS了,而且就算不看文档根据提......
  • 项目实践后的图片压缩完整使用过程【vue3+js】
    van-uploader+图片压缩+图片base64转成file compressImage.jsconstACCEPT=['image/jpg','image/png','image/jpeg']constMAXSIZE=1024*1024*2;constMAXTIP="4"//压缩算法函数/*1.首先拿到了base64的图片字符串2.创建一个image对象,获......