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

原创

已于 2022-11-03 11:03:54 修改 · 394 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #ajax #性能优化

于 2021-12-25 23:16:42 首次发布

本文探讨了Vue.js中v-for使用key的原因，组件渲染和更新的流程，MVVM的概念，组件化的重要性，ajax请求的最佳时机，$nextTick的作用，以及一系列Vue性能优化策略，包括v-if/v-show的使用，计算属性，v-for的key，事件处理，异步组件，keep-alive，数据结构优化等。

文章目录

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

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

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

vue组件初次渲染过程:

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

vue组件更新过程:

修改data,触发setter(此前在getter中已被更新),
重新执行render函数,生成newVnode

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端OnTheRun

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

35 道必看的 Vue 面试题-（前端开发 + Vue + 面试题 + 准备）

08-16

在面试中，对于Vue的理解和掌握程度通常体现在一系列的问题上，以下是一些常见的Vue面试题及其解析： 1. **MVVM的理解**： MVVM架构的核心是双向数据绑定，使得Model和View之间保持同步。Model代表数据模型，包含...

Vue最新2021年面试题附答案解析，大汇总

03-05

以下是对Vue面试题及答案的详细解析： 1. Vue 指令及其用法： - `v-if`：条件渲染，根据表达式的值决定是否渲染元素。 - `v-for`：用于循环遍历数组或对象，可以与`v-bind:key`一起使用以跟踪每个项。 - `v-bind...

参与评论您还未登录，请先登录后发表或查看评论

Vue中v-for的就地更新，key的作用

weixin_57322537的博客

10-15

656

v-for就地更新：如果循环中添加或删除数据，数据的更新。 Vue默认更新：类似于按照index对比的依次对比，如果数组中间添加一条数据，添加的数据得到的是之前数据的索引，vue默认会把原来的值赋值给新添加的数据，因为索引(位置)一样。之后数据因为索引发生改变，所以全部都会改变 :key的作用：更改vue默认更新对比方式。 :key="按什么之查找对比"，id是不会重复的，一般用id查找(唯一的标识)，这样如果在中间新添加一条数据，就会按照id去对比，所以只会在中间添加了一条数据，后面的值因为id还是.

描述组件渲染和更新过程

weixin_51053942的博客

06-18

386

vue组件初始渲染过程以及更新过程

Vue学习（十）v-for循环

weixin_41827712的博客

06-06

169

案例一：v-for循环普通数组 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

zpfnext的博客

10-02

497

const instanceOf = (A,B) => { let p =A; while§ { if(p === B.prototype) { return true } p = p.proto } return false } 1

vue核心面试题：描述组件渲染和更新过程

王三六博客

08-17

3945

一、概念：渲染组件时，会通过 Vue.extend 方法构建子组件的构造函数，初始化组件的时候会进行实例化。终手动调用 $mount() 进行组件挂载渲染。更新组件时会进行 patchVnode 流程.核心就是diﬀ算法。二、组件渲染流程一般组件渲染时，我们会这样写h => h(App)，app最后是一个对象，会通过一个createElement方法把这个app对象渲染成一个虚拟节点，然后调用update更新成一个真实节点。组件在渲染的时候会执行lifecycle文件中的mo.

Vue面试深度解析：MVVM模式、v-if/v-show、事件修饰符与v-model

"某马机构前端-vue高频面试题" ...这些面试题涉及到的Vue知识点是开发过程中经常会遇到的，理解并掌握它们对于提升Vue开发技能至关重要。在实际项目中，合理使用这些特性可以有效地优化代码，提高应用性能。

Vue.js 的组件渲染和更新过程

最新发布

大剑师兰特的GIS世界

07-11

986

Vue.js 的组件渲染和更新过程主要依赖于其响应式系统和虚拟 DOM。下面将详细描述这一过程

Vue之-列表渲染(v-for)与key的作用原理(面试题)

qq_67801847的博客

08-10

443

诺虚拟dom的内容没变，就执行之前的dom，如果改变，就执行新的真实dom。2.如果不存在对数据逆序添加，删除等，用index也没问题。如果没写key，vue将自动补全key，就是用index作为key。会产生新的虚拟dom更新==>效率低。创建新的真实dom，并渲染到页面。1.v-for: :key=:相当于id，每一个数组的唯一标识，不可重复。1.最好选择唯一标识为key：id等等。三种遍历：遍历数组，遍历对象，遍历字符串,遍历指定次数。面试题：vue中的key的作用原理。......

vue 组件渲染/更新过程

Luckyzhoufangbing的博客

08-30

2275

（一）初次渲染过程 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

861

最近鼠鼠收到了上海追势科技的实习offer，bg双非本9硕，0项目0实习，数学系。已经跟hr确认了offer和报道时间，但可能不想去的话，可以不去吗，虽然实习offer而已，好像没有。腾讯自从上周四二面完，既不挂我，也不约面，，能不能给我个痛快，不行就赶紧挂了，我还说不定能赶上最后一。本人第一次面试，遇到了个很好的技术面试官，本人是个菜鸡，面试官一直引导我给我提示，还给我建议，受益匪。笔试全英文，五个大题，一个BCI测试相关的，一个buck电路相关的，再就是一些零零散散硬件、射频的知。

组件渲染和更新的过程_前端培训

zjjcchina的博客

10-13

502

初次渲染过程：更新过程：异步渲染：

v-for里key的作用面试题

wanan1215的博客

06-14

395

面试题：v-for中的key值有什么作用？为什么不推荐使用索引作为key值面试题关于keyVue更新使用v-for渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用在"就地复用"策略中，输入框没有与数据绑定，所以vuejs默认使用已经渲染的dom，然而文本是与数据绑定的，所以文本被重新渲染。这种处理方式在vue中是默认的列表渲染策略，因为高效。这个默认的模式是高效的，但是在更多的时候，并不需要这样去处理，所以，为了给Vue

【Vue学习】Vue原理——组件渲染和更新

zx1041561837的博客

03-02

2246

本文介绍了Vue中的模板编译以及组件渲染/更新的过程。

Vue面试题之——v-for中的key值的作用是什么

NanChen的博客

10-18

871

Vue中的key值的作用是什么解释：当v-for正在更新以渲染过的元素列表时，它默认用是就地复用策略。如果数据项的顺序被改变，Vue将不会移动元素来匹配数据项的顺序，而是简单复用此处的每个元素，并且确保它在特定的索引下显示已被渲染过的每个元素。key的作用呢主要就是为了高效的更新虚拟档 ...

“约见”面试官系列之常见面试题之第七十四篇之v-if和v-for优先级（建议收藏）

歌谣的博客

09-12

535

永远不要把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

266

关于Vue框架部分，总会涉及一些高频面试题，大多数看似非常初级。有些纯记忆性质的面试题，我们在官方文档很容易就能查看到。举个例子：vue组件之间如何通信?vue生命周期有哪些？这类面试题在文档中就能找到答案，网络上面找到的答案也是千篇一律。大家只要使用过vue并且稍加记忆即可流畅作答。但是，如果我们也这样回答，那就算自己真的比其他竞争者更有实力，也很难脱颖而出，更别提获得高薪offer了...

Vue常见面试题（第二期）

weixin_45069190的博客

11-18

209

一、子组件能不能修改父组件传递过来的数据答案是当然可以，但是会出现报错所以我们不能直接修改父组件传递过来的值这里有两种方法：子组件通过data定义一个状态来接收父组件传递过来的数据，把传递过来的数据作为data中局部数据的初始值使用： <div id="app"> <custom-com :count="count"></custom-com> ...