前端必会vue面试题(必备)_2023-03-15

   日期:2024-12-26    作者:aishangshixun 移动:http://oml01z.riyuangf.com/mobile/quote/35647.html

Vuex有哪几种属性?

有五种,分别是 State、 Getter、Mutation 、Action、 Module

Vue.js的template编译

简而言之,就是先转化成AST树,再得到的render函数返回VNode(Vue的虚拟DOM节点),详细步骤如下:

首先,通过compile编译器把template编译成AST语法树(abstract syntax tree 即 源代码的抽象语法结构的树状表现形式),compile是createCompiler的返回值,createCompiler是用以创建编译器的。另外compile还负责合并option。

然后,AST会经过generate(将AST语法树转化成render funtion字符串的过程)得到render函数,render的返回值是VNode,VNode是Vue的虚拟DOM节点,里面有(标签名、子节点、文本等等)

Vue 中 computed 和 watch 有什么区别?

计算属性 computed

侦听属性 watch

vue初始化页面闪动问题

使用vue开发时,在vue初始化之前,由于div是不归vue管的,所以我们写的代码在还没有解析的情况下会容易出现花屏现象,看到类似于{{message}}的字样,虽然一般情况下这个时间很短暂,但是还是有必要让解决这个问题的。

首先:在css里加上以下代码:

如果没有彻底解决问题,则在根元素加上

Vue中的key到底有什么用?

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

diff算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的与旧节点进行比对,然后超出差异.

diff程可以概括为:oldCh和newCh各有两个头尾的变量StartIdx和EndIdx,它们的2个变量相互比较,一共有4种比较方式。如果4种比较都没匹配,如果设置了key,就会用key进行比较,在比较的过程中,变量会往中间靠,一旦StartIdx>EndIdx表明oldCh和newCh至少有一个已经遍历完了,就会结束比较,这四种比较方式就是首、尾、旧尾新头、旧头新尾.

依赖收集简版

参考

diff算法

时间复杂度: 个树的完全 算法是一个时间复杂度为 ,vue进行优化转化成 。

理解:

diff算法的优化策略:四种命中查找,四个指针

$nextTick 是什么?

Vue 实现响应式并不是在数据发生后立即更新 DOM,使用 是在下次 DOM 更新循环结束之后立即执行延迟回调。在修改数据之后使用,则可以在回调中获取更新后的 DOM

为什么要有这些模式,目的:职责划分、分层(将层、层进行分类)借鉴后端思想,对于前端而已,就是如何将数据同步到页面上

MVC模式 代表: + +

MVVM模式 映射关系的简化,隐藏了

是缩写,也就是把中的演变成。层代表数据模型,代表UI组件,是和层的桥梁,数据会绑定到层并自动将数据渲染到页面中,视图变化的时候会通知层更新数据。

总结 : 模式简化了界面与业务的依赖,解决了数据频繁更新。 在使用当中,利用双向绑定技术,使得 变化时, 会自动更新,而 变化时, 也会自动变化。

我们以下通过一个 实例来说明 的具体实现

的编译过程就是将 转化为 函数的过程

回答范例

思路

回答范例

可能的追问

在 之后。 会调用 函数进行初始化,也就是这里的 i 过程,它会初始化生命周期、事件、 、 、 、 与 等。其中最重要的是通过 设置 与 函数,用来实现「响应式」以及「依赖收集」

使用将语法解析

源码分析

Vue的优点

diff算法

<details open=""><summary><b>答案</b></summary>

<p>

</p><p><strong>时间复杂度:</strong> 个树的完全<code> diff</code> 算法是一个时间复杂度为<code> O(n*3)</code> ,vue进行优化转化成<code> O(n)</code> 。</p>

<p><strong>理解:</strong></p>

<ul>

<li>

<p>最小量更新,<code> key</code> 很重要。这个可以是这个节点的唯一标识,告诉<code> diff</code> 算法,在更改前后它们是同一个DOM节点</p>

<ul>

<li>扩展<code> v-for</code> 为什么要有<code> key</code> ,没有<code> key</code> 会暴力复用,举例子的话随便说一个比如移动节点或者增加节点(修改DOM),加<code> key</code> 只会移动减少操作DOM。</li>

</ul>

</li>

<li>

<p>只有是同一个虚拟节点才会进行精细化比较,否则就是暴力删除旧的,插入新的。</p>

</li>

<li>

<p>只进行同层比较,不会进行跨层比较。</p>

</li>

</ul>

<p><strong>diff算法的优化策略</strong>:四种命中查找,四个指针</p>

<ol>

<li>

<p>旧前与新前(先比开头,后插入和删除节点的这种情况)</p>

</li>

<li>

<p>旧后与新后(比结尾,前插入或删除的情况)</p>

</li>

<li>

<p>旧前与新后(头与尾比,此种发生了,涉及移动节点,那么新前指向的节点,移动到旧后之后)</p>

</li>

<li>

<p>旧后与新前(尾与头比,此种发生了,涉及移动节点,那么新前指向的节点,移动到旧前之前)</p>

</li>

</ol>

<p></p>

</details>

--- 问完上面这些如果都能很清楚的话,基本O了 ---

以下的这些简单的概念,你肯定也是没有问题的啦


特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


举报收藏 0评论 0
0相关评论
相关最新动态
推荐最新动态
点击排行
{
网站首页  |  关于我们  |  联系方式  |  使用协议  |  隐私政策  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号