前端每日一练:以下两段代码在 vue 中分别渲染多少次?为什么?​​_在vue中,以下代码分别执行几次-程序员宅基地

技术标签: 面试  前端每日一练  前端  vue.js  javascript  ecmascript  

问题:以下两段代码在 vue 中分别渲染多少次?为什么?​

<template>​
  <div>{
   {rCount}}</div>​
</template>​
​
<script setup>​
import { ref } from 'vue';​
const count = 0;​
const rCount = ref(count);​
for (let i = 0; i < 5; ++i) {​
  rCount.value = i;​
}​
</script>

<template>​
  <div>{
   {rCount}}</div>​
</template>​
<script setup>​
import { ref } from 'vue';​
const count = 0;​
const rCount = ref(count);​
for (let i = 0; i < 5; ++i) {​
  setTimeout(() => {​
    rCount.value = i;​
  }, 0);​
}​
</script>

答案:左边1次,右边5次。​

解释:当数据发生变化,会被 Object.defineProperty(vue2) 或 new Proxy(vue3) 监听到,监听到之后会把调用渲染函数,但渲染函数不是立即执行,而是会放到一个微任务队列中 Promise.reslove().then() (vue3) 或 nextTick (vue2) ,等待当前所有同步代码执行完成后,会调用微任务,一次过更新内容。​

vue2: vue2/src/core/observer/scheduler.ts -> queueWatcher -> nextTick​

vue3: vue3/packages/reactivity/src/deferredComputed.ts -> tick

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/SAXX2/article/details/136829257

智能推荐

python程序员入职第一天_看不懂代码,不会用框架,新手程序员入职后如何快速上手项目?...-程序员宅基地

文章浏览阅读949次,点赞2次,收藏3次。大家好,我是良许。对于职场新人,特别是应届毕业生,他们拿到offer之后,进入公司后会有一段时间的焦虑感。比如说,不懂公司项目开发流程,代码看不懂,业务流程也不知道,框架不会用,等等还有各种各样的问题。所以很多人一开始都会在担心自己能不能胜任这个职位,会不会连试用期都过不了。其实这个心态是很常见的,每个程序员应该都会经历这么一个过程。就拿我自己来说吧,由于我是自学转行的,我的技术本身就比那些科班出..._进入公司不会写python怎么办

关于ffmpeg中rtmp无法设置超时时间的bug修复_ffmpeg rtmp 超时设置-程序员宅基地

文章浏览阅读1.1k次。AVDictionary* options = nullptr; av_dict_set(&options, "timeout", "3000000", 0); //设置超时断开连接时间 if (avformat_open_input(&pFormatCtx, url, NULL, &options) != 0) { printf("Couldn't open input stream.(无法打开输入流)\n"); ret..._ffmpeg rtmp 超时设置

关于google浏览器的xpath选择器插件使用总结_selectorshub-程序员宅基地

文章浏览阅读1.7k次。在谷歌商店中评分比较高的xpath插件有XPath Helper(Chrome)SelectorsHub(Chrome)说下两者的使用情况XPath Helper(Chrome) 应该是国内使用比较多的,但是他基本上都是快捷键操作,和我的电脑的快捷键设置有冲突,故而他在我的电脑上是很不好用的,但是它简单易用,很灵活,浏览器开销也比较小,SelectorsHub(Chrome)是在我的快捷键有冲突之后,开代理上商店里边比较出来的一块很好用的xpath插件但是对于浏览器的开销相对要大很多_selectorshub

nginx 命令 启动 停止_ngix 开启结束命令-程序员宅基地

文章浏览阅读399次。启动操作命令:nginx -c /usr/nginx/conf/nginx.conf-c参数指定了要加载的nginx配置文件 路径。停止操作停止操作是通过向nginx进程发送信号(什么是信号请参阅linux文章)来进行的步骤1:查询nginx主进程号ps -ef | grep nginx在进程列表里 面找master进程,它的编号就是主进程号了。步骤2:发送_ngix 开启结束命令

Qlik十月版本带你体验最新的外观主题!_qlik在线体验-程序员宅基地

文章浏览阅读169次。在十月份发布的版本中,Qlik对用户自定义其云分析体验带来了新的可能性。新的图表监控增强功能和对集合的更轻松访问使用户可以直接从云中心轻松组织和访问其最关键的见解和可视化。全新的默认主题提供了更好,外观更现代的应用程序。此版本还包括通过Qlik DataTransfer扩展的数据连接选项,数据重新加载管理以及具有JWT授权的新身份管理配置选项。自定义您的中心和更快地访问关键见解图表监控增强用户拥有更多选择,可以直接从云中心监视最重要的图表。现在,除了用户创建的图表外,用户还可以选择由Insigh_qlik在线体验

java.lang.NoClassDefFoundError: org/apache/tez/dag/api/SessionNotRunning-程序员宅基地

文章浏览阅读7k次,点赞7次,收藏4次。IDEA编写程序:spark SQL连接 hive报错:java.lang.NoClassDefFoundError: org/apache/tez/dag/api/SessionNotRunning我的问题出现在:方法一:把hive-site.xml拷贝到idea的resources中后,hive-site.xml中的一个配置需要改:简单来说,把 “hive.execution.eng..._java.lang.noclassdeffounderror: org/apache/tez/dag/api/sessionnotrunning

随便推点

图解TensorFlow op:tf.nn.space_to_depth_space-to-depth-程序员宅基地

文章浏览阅读4.9k次,点赞15次,收藏22次。田海立@CSDN 2020-10-20TensorFlow算子space_to_depth是depth_to_space的逆操作。本文用图文的方式来解释该算子运算的方式。一、space_to_depth原型space_to_depth是把space数据(width和height维)移到depth(Channel)维上,与depth_to_space刚好是反向的操作。对应到ML该操作是把width和height维上各取block_size都分给depth上。所以,对应有一个参数block_s._space-to-depth

找不到 cl.exe 解决办法-程序员宅基地

文章浏览阅读1.7w次,点赞32次,收藏64次。._cl.exe

(Linux)kill命令常用技巧_kill -g-程序员宅基地

文章浏览阅读4.6w次,点赞14次,收藏98次。前言在Linux的系统中,kill是我们最常见的命令之一。 kill,英语中为杀死的意思,顾名思义,就是用来杀死一些东西的命令,常用来杀死系统中的进程。就像是Windows系统中的关闭软件的按钮,不过kill最直接,从后台直接停止。下面就介绍一下,kill是如何杀死进程的。kill命令的参数在Linux系统中命令都是有参数的,这给了我们很多的选择,但是kill的重..._kill -g

用inkscape临摹logo_inkscape 画平行四边形-程序员宅基地

文章浏览阅读470次。《用inlscape临摹太极图logo》_inkscape 画平行四边形

实现哈希表的相关运算算法_建立关键字序列(16,74,60,43,54,90,46,31,29,88,77)对应的哈希表a[0-程序员宅基地

文章浏览阅读5.4k次,点赞4次,收藏52次。/*** 实验题目:* 实现哈希表的相关运算算法* 实验目的:* 领会哈希表的构造和查找过程及其相关算法设计* 实验内容:* 设计程序,实现哈希表的相关运算,并完成如下功能:* 1、建立关键字序列(16, 74, 60, 43, 54, 90, 46, 31, 29, 88, 77)对应的哈希* 表A[0..1..._建立关键字序列(16,74,60,43,54,90,46,31,29,88,77)对应的哈希表a[0..12],哈希函

部署Kubernetes kube-apiserver启动失败_kube-apiserver.service holdoff time over, scheduli-程序员宅基地

文章浏览阅读3.4w次,点赞2次,收藏6次。systemctl restart kube-apiserver启动失败[root@centos-master yum.repos.d]# systemctl status kube-apiserver.service● kube-apiserver.service - Kubernetes API Server Loaded: loaded (/usr/lib/systemd/syst..._kube-apiserver.service holdoff time over, scheduling restart.

推荐文章

热门文章

相关标签