面试前端随笔20240510

最近公司招聘前端开发人员有幸参与帮听，总结了三个有关vue的面试问题和答案，现在分享一下。

1.Vue2数据监听无法监听数组为啥？有啥解决方案？vue3中是如何处理这个问题？

vue2的官方说明了defineProperty的一些限制：
数组在两种情况下是无法监听的：
1.利用索引直接设置一个数组项时，例如：arr[indexOfItem] = newValue;
2.修改数组的长度时，例如：arr.length = newLength;

对象一下情况无法监听
无法监听新增属性和删除属性

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

Vue的数据响应式原理主要是通过ES5的Object.defineProperty方法来实现的。

Vue在初始化数据对象时，会遍历数据对象的所有属性，并使用Object.defineProperty将这些属性转为访问器属性，从而在对这些属性进行读取或者赋值的时候，能够触发getter和setter函数，然后Vue就能够更新视图。

Vue2数据监听无法监听数组，本质原因是Object.defineProperty 存储描述中的getter和setter触发都是通过索引访问和设置。申明的对象属性值也就是索引值是有限和确定的，但是数组是一种特殊的对象它的索引值是不固定，在getter和setter 无法劫持。
Vue2内部通过重写数组的原型方法来监听数组的变动。（push、pop、shift、unshift、splice、sort、reverse）会触发原有的逻辑之外，还会触发视图更新。
vue3中使用的proxyES6代理

2.Vuex存储的状态存放到哪里，什么情况下会丢失？是否有大小限制？如何解决上述问题？

Vuex 的状态存储在内存中。

以下情况下会丢失：
1.页面刷新：当浏览器地址栏中的URL发生变化，导致页面全部重新加载时，Vuex中的状态会丢失。
2.使用Vue Router的单页面应用（SPA）导航时：如果你使用的是Vue Router的默认导航策略，即使是同一个路由的不同视图间的切换，也可能会导致组件重新创建，从而导致Vuex状态的丢失。
3.错误的Vuex状态管理：如果你在操作Vuex状态时出现了错误，比如直接修改了state的属性而不是通过mutations，这样可能会导致状态的丢失。

Vuex存储的数据理论上是没有大小限制的，但是过大，可能会导致性能问题，甚至可能引起内存溢出错误。

解决方法有如下：
1.存储到浏览器本地存储中（sessionStorage、localStorage、cookie）。
2.使用第三方插件

3.开放问题Vue页面渲染是如何进行的？

vue内部编译顺序：

第一步，把模板编译为render函数
第二步，实例进行挂载, 根据根节点render函数的调用，递归的生成虚拟dom。
第三步，对比虚拟dom，渲染到真实dom。

生成虚拟DOM包含下过程

1. 第一步，用 JS 对象模拟 DOM 树，得到一棵虚拟 DOM 树。
2. 第二步，当页面数据变更时，生成新的虚拟 DOM 树，比较新旧两棵虚拟 DOM 树的差异。
3. 第三步，把差异应用到真正的 DOM 树上。

第四步，将虚拟DOM 生成真正的DOM插入到页面中，进行页面渲染。

vue项目文件加载顺序

1. 加载index.html文件
2. 运行main.js文件
3. main.js挂载了核心代码以及该文件下其他模块。

生命周期顺序