2021-12-25 面试题:vue(二) v-for使用key的原因,组件渲染更新过程,MVVM的理解,组件和封装组件的意义,ajax放在哪个生命周期,$nextTick作用,vue常见性能优化方式

已于 2022-11-03 11:03:54 修改
阅读量325 收藏
点赞数
分类专栏： 面试 文章标签： vue.js ajax 性能优化
于 2021-12-25 23:16:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rowlet/article/details/122150262
版权
本文探讨了Vue.js中v-for使用key的原因，组件渲染和更新的流程，MVVM的概念，组件化的重要性，ajax请求的最佳时机，$nextTick的作用，以及一系列Vue性能优化策略，包括v-if/v-show的使用，计算属性，v-for的key，事件处理，异步组件，keep-alive，数据结构优化等。
摘要由CSDN通过智能技术生成

文章目录

1.为什么v-for要使用key?

快速查找到节点,减少渲染次数,提高渲染性能

2.描述组件渲染和更新的过程

vue组件初次渲染过程:

解析模板为render函数,
监听data属性的getter和setter,
执行render函数,生成vnode,patch(ele,vnode):

vue组件更新过程:

修改data,触发setter(此前在getter中已被更新),
重新执行render函数,生成newVnode
最低0.47元/天 解锁文章
前端OnTheRun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
35 道必看的 Vue 面试题-（ 前端开发 + Vue + 面试题 + 准备）
08-16
在面试中，对于Vue的理解和掌握程度通常体现在一系列的问题上，以下是一些常见的Vue面试题及其解析： 1. **MVVM的理解**： MVVM架构的核心是双向数据绑定，使得Model和View之间保持同步。Model代表数据模型，包含...
Vue中v-for的就地更新，key的作用
weixin_57322537的博客
10-15 578
v-for就地更新：如果循环中添加或删除数据，数据的更新。 Vue默认更新：类似于按照index对比的依次对比，如果数组中间添加一条数据，添加的数据得到的是之前数据的索引，vue默认会把原来的值赋值给新添加的数据，因为索引(位置)一样。之后数据因为索引发生改变，所以全部都会改变 :key的作用：更改vue默认更新对比方式。 :key="按什么之查找对比"，id是不会重复的，一般用id查找(唯一的标识)，这样如果在中间新添加一条数据，就会按照id去对比，所以只会在中间添加了一条数据，后面的值因为id还是.
描述组件渲染和更新过程
weixin_51053942的博客
06-18 331
vue组件初始渲染过程以及更新过程
描述组件渲染和更新的过程
zpfnext的博客
10-02 446
const instanceOf = (A,B) => { let p =A; while§ { if(p === B.prototype) { return true } p = p.proto } return false } 1
vue核心面试题：描述组件渲染和更新过程
王三六博客
08-17 3799
一、概念： 渲染组件时，会通过 Vue.extend 方法构建子组件的构造函数，初始化组件的时候会进行实例化。终手动调用 $mount() 进行组件挂载渲染。更新组件时会进行 patchVnode 流程.核心就是diff算法。 二、组件渲染流程 一般组件渲染时，我们会这样写h => h(App)，app最后是一个对象，会通过一个createElement方法把这个app对象渲染成一个虚拟节点，然后调用update更新成一个真实节点。 组件在渲染的时候会执行lifecycle文件中的mo.
Vue之-列表渲染(v-for)与key的作用原理(面试题)
qq_67801847的博客
08-10 367
诺虚拟dom的内容没变，就执行之前的dom，如果改变，就执行新的真实dom。2.如果不存在对数据逆序添加，删除等，用index也没问题。如果没写key，vue将自动补全key，就是用index作为key。会产生新的虚拟dom更新==>效率低。创建新的真实dom，并渲染到页面。1.v-for: :key=:相当于id，每一个数组的唯一标识，不可重复。1.最好选择唯一标识为key：id等等。三种遍历：遍历数组，遍历对象，遍历字符串,遍历指定次数。面试题：vue中的key的作用原理。......
Vue最新2021年面试题附答案解析，大汇总
03-05
以下是对Vue面试题及答案的详细解析： 1. Vue 指令及其用法： - `v-if`：条件渲染，根据表达式的值决定是否渲染元素。 - `v-for`：用于循环遍历数组或对象，可以与`v-bind:key`一起使用以跟踪每个项。 - `v-bind...
2023vue面试题总结-17页
05-24
- **v-for加key**：确保每个项有唯一标识，利于DOM更新。 - **虚拟列表/表格**：用于大数据量展示，只渲染可视区域。 - **图片懒加载**：按需加载图片，减少初始加载负担。 - **路由懒加载**：按需加载组件，...
vue 组件渲染/更新过程
Luckyzhoufangbing的博客
08-30 2137
（一） 初次渲染过程 1. 解析模板为 render 函数 这部分是说vue 编译相关，也就是说把 vue 语法编译 成 js 语法，通过执行 vue-template-compiler 的 compiler 函数，得到 render 2. 触发响应式 响应式关键 Object.defineProperty()，将模版初次渲染使用到的变量绑定到Object.defineProperty() 中，首次渲染会 触发 getter 3. 执行render 函数 第一点说到已经得到rend...
vue面试题目|vue组件化理解，v-for,v-model
最新发布
2301_78234743的博客
04-29 686
最近鼠鼠收到了上海追势科技的实习offer，bg双非本9硕，0项目0实习，数学系。已经跟hr确认了offer和报道时间，但可能不想去的话，可以不去吗，虽然实习offer而已，好像没有。腾讯自从上周四二面完，既不挂我，也不约面，，能不能给我个痛快，不行就赶紧挂了，我还说不定能赶上最后一。本人第一次面试，遇到了个很好的技术面试官，本人是个菜鸡，面试官一直引导我给我提示，还给我建议，受益匪。笔试全英文，五个大题，一个BCI测试相关的，一个buck电路相关的，再就是一些零零散散硬件、射频的知。
组件渲染和更新的过程_前端培训
zjjcchina的博客
10-13 391
初次渲染过程：更新过程：异步渲染：
v-for里key的作用面试题
wanan1215的博客
06-14 337
面试题：v-for中的key值有什么作用？为什么不推荐使用索引作为key值面试题关于keyVue更新使用v-for渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用在"就地复用"策略中，输入框没有与数据绑定，所以vuejs默认使用已经渲染的dom，然而文本是与数据绑定的，所以文本被重新渲染。这种处理方式在vue中是默认的列表渲染策略，因为高效。这个默认的模式是高效的，但是在更多的时候，并不需要这样去处理，所以，为了给Vue
【Vue学习】Vue原理——组件渲染和更新
zx1041561837的博客
03-02 2008
本文介绍了Vue中的模板编译以及组件渲染/更新的过程。
Vue面试题之——v-for中的key值的作用是什么
NanChen的博客
10-18 810
Vue中的key值 的作用是什么 解释：当v-for正在更新以渲染过的元素列表时，它默认用是就地复用策略。如果数据项的顺序被改变，Vue将不会移动元素来匹配数据项的顺序，而是简单复用此处的每个元素，并且确保它在特定的索引下显示已被渲染过的每个元素。key的作用呢主要就是为了高效的更新虚拟档 ...
“约见”面试官系列之常见面试题之第七十四篇之v-if和v-for优先级（建议收藏）
歌谣的博客
09-12 407
永远不要把v-if和v-for同时用在同一个元素上。 一般我们在两种常见的情况下会倾向于这样做： 为了过滤一个列表中的项目 (比如v-for="user in users" v-if="user.isActive")。在这种情形下，请将users替换为一个计算属性 (比如activeUsers)，让其返回过滤后的列表。 为了避免渲染本应该被隐藏的列表 (比如v-for="user in users" v-if="shouldShowUsers")。这种情形下，请将v-if...
vue for循环_9道价值20K的“VUE必备面试题”，收藏不亏！
weixin_39797693的博客
12-12 215
关于Vue框架部分，总会涉及一些高频面试题，大多数看似非常初级。有些纯记忆性质的面试题，我们在官方文档很容易就能查看到。举个例子：vue组件之间如何通信?vue生命周期有哪些？这类面试题在文档中就能找到答案，网络上面找到的答案也是千篇一律。大家只要使用过vue并且稍加记忆即可流畅作答。但是，如果我们也这样回答，那就算自己真的比其他竞争者更有实力，也很难脱颖而出，更别提获得高薪offer了...
Vue 组件 渲染/更新 过程（笔记自用）
weixin_39763711的博客
08-18 1728
组件 渲染/更新 过程
前端笔试面试之方法封装
weixin_40304563的博客
10-27 2820
笔试面试中可能会问到的方法封装
Vue面试深度解析：MVVM模式、v-if/v-show、事件修饰符与v-model
"某马机构前端-vue高频面试题" ...这些面试题涉及到的Vue知识点是开发过程中经常会遇到的，理解并掌握它们对于提升Vue开发技能至关重要。在实际项目中，合理使用这些特性可以有效地优化代码，提高应用性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端OnTheRun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值