VUE知识体系、VUE面试题

简介: Vue 计算属性与方法差异:计算属性有缓存,基于依赖自动重计算,适合数据转换;方法无缓存,每次调用都会执行,参数灵活。计算属性相当于属性,可读写;方法用于处理逻辑。v-if 与 v-show:v-if根据条件创建或销毁DOM,适合不频繁切换;v-show通过改变display控制显示,频繁切换更优。v-if提高渲染效率,v-show维护DOM稳定性。v-for中key的作用:key帮助Vue识别唯一节点,优化diff算法,提高性能,避免使用index或random。

1. computed(计算属性)和方法有什么区别?

计算属性本质上是包含 getter 和 setter 的方法

当获取计算属性时,实际上是在调用计算属性的 getter 方法。vue 会收集计算属性的依赖,并缓存计算属性的返回结果。只有当依赖变化后才会重新进行计算。

方法没有缓存,每次调用方法都会导致重新执行。

计算属性的 getter 和 setter 参数固定,getter 没有参数,setter 只有一个参数。而方法的参数不限。

由于有以上的这些区别,因此计算属性通常是根据已有数据得到其它数据,并在得到数据的过程中不建议使用异步、当前时间、随机数等副作用操作。

实际上,它们最重要的区别是含义上的区别。计算属性含义上也是一个属性(data 属性),可以读取也可以赋值;方法含义上是一个操作,用于处理一些事情。

 

2. v-if和v-show有什么区别?

v-if 能够控制是否生成 vnode(虚拟dom树),也就间接控制了是否生成对应dom。当 v-if 为 true 时,会生成对应 vnode,并生成对应的 dom 元素;当其为 false 时,不会生成对应 vnode,自然不会生成任何 dom 元素。v-if 是组件真正的渲染和销毁,而不是显示和隐藏

v-show 始终会生成 vnode,也就间接导致了始终生成 dom。它只是控制 dom 的 display 属性,当 v-show为 true 时,不做任何处理;当其为 false 时,生成的 dom 的 dispaly 属性为 none。v-show 是 CSS display 控制显示和隐藏

使用 v-if 可以有效的减少树的节点和渲染量,但也会导致树的不稳定;而使用 v-show 可以保持树的稳定,但不能减少树的节点和渲染量。

vue渲染节点越少效率越高,树越稳定效率越高。v-if节点少但树不稳定,v-show节点多但树稳定。

因此,在实际开发中,显示状态变化频繁的情况下应使用 v-show,以保持树的稳定;显示状态变化少时应该使用 v-if,以减少树的节点和渲染量。

 

3. 为何 v-for 要用 key

必须要用 key, 而且不能用 index 和 random,

key 是 vue 中 vnode 的唯一标记,通过这个 key,我们的 diff 操作可以更准确,更快速

在 diff 算法中用 tag 和 key 来判断,是否是 sameNode

可以减少渲染次数,提高渲染性能

相关文章
|
1月前
|
JavaScript 前端开发 架构师
阿里前端常考vue面试题汇总(二)
阿里前端常考vue面试题汇总(二)
131 0
|
1月前
|
缓存 JavaScript 前端开发
2024 前端高频面试题之 Vue 篇
2024 前端高频面试题之 Vue 篇
44 8
|
1天前
|
JavaScript
vue面试
vue面试
12 3
|
1月前
|
移动开发 缓存 JavaScript
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度
24 6
|
1月前
|
算法 安全 Java
2024年Android最新知识体系最强总结(全方面覆盖Android知识结构,BAT面试&学习进阶)
2024年Android最新知识体系最强总结(全方面覆盖Android知识结构,BAT面试&学习进阶)
|
1月前
|
JavaScript 前端开发 API
vue面试题目汇总
vue面试题目汇总
48 4
|
1月前
|
缓存 JavaScript 前端开发
Vue常见面试题 标准答案汇总一
Vue常见面试题 标准答案汇总一
79 1
|
1月前
|
监控 JavaScript 前端开发
vue基础面试题10问
vue基础面试题10问
46 0
|
1月前
|
人工智能 缓存 JavaScript
【利用AI刷面试题】AI:十道Vue面试题巩固一下知识
【利用AI刷面试题】AI:十道Vue面试题巩固一下知识
|
1月前
|
存储 JavaScript 安全
Vue基础面试题题目一
Vue基础面试题题目一
33 0