vue面试题

Posted 2021-12-08 南风晚来晚相识

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue面试题相关的知识，希望对你有一定的参考价值。

1=>为什么data是一个函数【理解】 ok

每复用一次组件，就会返回一分新的data。
也就说:【每个组件实例创建】一个【私有】的数据空间。各个组件维护各自的数据。
如果单纯的写成对象形式，那么所有组件实例共用了一份data，就会造成一个变了全都会变的结果。
data(){
    return{
        
    }
}

2=> Vue组件通讯有哪些方式？ ok

1、props(父给子) 和 $emit (子传递父) 很熟悉  ok
4、父组件中通过 provide 来提供变量，然后在子组件中通过 inject 来注入变量。（官方不推荐在实际业务中适用，但是写组件库时很常用。）
7、vuex 状态管理。 ok

明天去处理一下
6、envetBus 兄弟组件数据传递，这种情况下可以使用事件总线的方式。 ok
2、$parent 和 $children 获取当前父组件和当前组件的子组件。
3、$attrs 和 $listeners A -> B -> C。Vue2.4开始提供了$attrs和$listeners来解决这个问题。
5、$refs 获取组件实例。 

回答的越多，可以让自己加分
面试官会觉得你的技术还不错

3=> vue的生命周期 8+2 ok

我们都知道vue常用的8个生命周期，但是这几个生命周期你熟悉吗
activated keep-alive 专属，组件被激活时调用 [ai k t v ti de]
第一次进入也会触发activated  

deactivated keep-alive 专属，组件被销毁时调用 【di ai k t v ti de】

4=> 怎样理解 Vue 的单项数据流 ok

数据总是从父组件传到子组件，
子组件没有权利修改父组件传过来的数据，[如果你强行更改，vue会有红色的警告，告诉你这个是单向的]
只能请求父组件对原始数据进行修改。

这样会防止从子组件意外改变父组件的状态，
从而导致你的应用的数据流向难以理解。

5=> v-if 和 v-for 为什么不建议一起使用 ok

v-for和v-if不要在同一标签中使用，
因为解析时先解析v-for然后在解析v-if,[会消耗性能的哈]
如果遇到需要同时使用时可以嵌套一层元素  
<template></template>

5.1=> vue3 v-for和v-if做了更改

很幸运 vue 3.x 中， v-if 总是优先于 v-for。

6==>Vue如何检测数组变化 [这个我不太理解--我理解了] ok

数组考虑性能原因没有用 defineProperty 对数组的每一项进行拦截，
而是选择对7种数组（push,shift,pop,splice,unshift,sort,reverse）方法进行重写（AOP切片思想）。
所以在 Vue 中修改数组的索引和长度无法监控到。

需要通过以上7种变异方法修改数组才会触发数组对应的watcher进行更新。【这一句自己理解就可以了】

07==> Vue的父子组件生命周期钩子函数执行顺序 [这一部分自己确实不够了解] ok

加载渲染过程
父beforeCreate -> 父created -> 父beforeMount ->
->子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

子组件更新过程
父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated

父组件更新过程
父beforeUpdate -> 父updated

销毁过程
父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

虚拟DOM是什么？有什么优缺点？

[本节是一个重点，你需要多花一点时间去理解哈]

由于在浏览器中操作DOM是很昂贵的。频繁操作DOM，会产生一定性能问题。这就是虚拟Dom的产生原因。Vue2的Virtual DOM 借鉴了开源库 snabbdom 的实现。Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点，是对真实DOM的一层抽象。
优点：
1、保证性能下限：框架的虚拟DOM需要适配任何上层API可能产生的操作，他的一些DOM操作的实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的DOM操作性能要好很多，因此框架的虚拟DOM至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，既保证性能的下限。
2、无需手动操作DOM：我们不需手动去操作DOM，只需要写好 View-Model的 代码逻辑，框架会根据虚拟DOM和数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率。
3、跨平台：虚拟DOM本质上是JavaScript对象，而DOM与平台强相关，相比之下虚拟DOM可以进行更方便地跨平台操作，例如服务器端渲染、weex开发等等。
缺点：
1、无法进行极致优化：虽然虚拟DOM + 合理的优化，足以应对大部分应用的性能需要，但在一些性能要求极高的应用中虚拟DOM无法进行针对性的极致优化。
2、首次渲染大量DOM时，由于多了一层DOM计算，会比innerHTML插入慢。

v-model 原理

v-model 只是语法糖而已。
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件。
text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change事件；
select 字段将 value 作为 prop 并将 change 作为事件。
注意：对于需要使用输入法的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。
在普通元素上：
input v-model=\'sth\' 
input v-bind:value=\'sth\' v-on:input=\'sth = $event.target.value\'

17、v-for为什么要加key

如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。key 是为Vue中Vnode的唯一标识，通过这个key，我们的diff操作可以更准确、更快速。
更准确：因为带key就不是就地复用了，在sameNode函数 a.key === b.key 对比中可以避免就地复用的情况。所以更加准确。
更快速：利用key的唯一性生成map对象来获取对应节点，比遍历方式块。

1=> Vue3.0 和 2.0 的响应式原理区别

Vue3.x 改用 Proxy[pu luo k she] 替代 Object.defineProperty[di fai n prɒ pə ti]。
因为 Proxy 可以直接监听对象和数组的变化，
因为 defineProperty是不可以直接对数组进行监听
Vue2 中修改数组的索引和长度无法被监控到。

2=> Vuex 页面刷新数据丢失怎么解决？

在刷新页面的时候，将vuex中的只存在本地
也可以使用第三方插件。  vuex-persist (pəˈsɪ s t])插件，
它是为 Vuex 持久化储存而生的一个插件。

3 你都做过哪些 Vue 的性能优化？

使用vue说明项目是一个庞大的工程。
对象层级不要过深，否则性能就会差。
不需要响应式的数据不要放在 data 中（可以使用 Object.freeze() 冻结数据）
v-if 和 v-show 区分使用场景
computed 和 watch 区分场景使用
v-for 遍历必须加 key，key最好是id值，且避免同时使用 v-if
图片懒加载
路由懒加载
第三方插件的按需加载
适当采用 keep-alive 缓存组件
防抖、节流的运用

4 Vue.mixin 的使用场景和原理

你自己组织一下mixin的使用，这个太复杂了

在日常开发中，我们经常会遇到在不同组件中经常用到一些相同或者相似的代码，
这些代码的功能相对独立，可以通过vue 的 mixin 功能抽离公共的业务逻辑，原理类似“对象的继承”，
当组件初始化时会调用 mergeOptions 方法进行合并，
采用策略模式针对不同的属性进行合并。当组件和混入对象含有相同名选项时，
这些选项将以恰当的方式进行“合并”。

5. nextTick 使用场景和原理

你自己组织一下mixin的使用，这个太复杂了
nextTick 中的回调是在下次 DOM 更新循环结束之后执行的延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。主要思路就是采用微任务优先的方式调用异步方法去执行 nextTick 包装的方法。

6、 keep-alive 使用场景和原理

keep-alive 是 Vue 内置的一个组件，可以实现组件缓存，当组件切换时不会对当前组件进行卸载。
常用的两个属性 include/exclude，允许组件有条件的进行缓存。
两个生命周期 activated/deactivated，用来得知当前组件是否处理活跃状态。
keep-alive 运用了 LRU 算法，选择最近最久未使用的组件予以淘汰。

7、Vue.set 方法原理

1、在实例创建之后添加新的属性到实例上（给响应式对象新增属性）
2、直接更改数组下标来修改数组的值。
Vue.set 或者说是 $set 原理如下
因为响应式数据 我们给对象和数组本身新增了__ob__属性，代表的是 Observer 实例。当给对象新增不存在的属性，首先会把新的属性进行响应式跟踪 然后会触发对象 __ob__ 的dep收集到的 watcher 去更新，当修改数组索引时我们调用数组本身的 splice 方法去更新数组。

本文的源地址：https://www.cnblogs.com/wenshaochang123/p/14888494.html

作者：明月人倚楼
出处：https://www.cnblogs.com/IwishIcould/

想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！

如果觉得这篇文章对你有小小的帮助的话，记得在右下角点个“推荐”哦，或者关注博主，在此感谢！

万水千山总是情，打赏5毛买辣条行不行，所以如果你心情还比较高兴，也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾！

想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！