面试前端随笔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.使用第三方插件