【Vue面试题系列】三

说说vue中的diff算法

diff算法是一种通过同层的树节点进行比较的高效算法
有两个特点：比较只会在同层级进行，不会跨层级比较；在diff比较的过程中，循环从两边向中间比较。
diff算法在很多场景下都有应用，在vue中，作用于虚拟dom渲染成真实dom的新旧VNode节点比较。
比较方式：深度优先，同层比较。比较只会在同层级进行，不会跨层级比较；比较的过程中，循环从两边向中间收拢。

• 当数据发生变化时，订阅者watcher就会调用patch给真实的DOM打补丁
• 通过isSameVnode进行判断，相同则调用patchVnode方法
• patchVnode做了以下操作：找到对应的真实dom，称为el；如果都有文本节点且不相等，将el文本节点设置为Vnode的文本节点；如果oldVnode有子节点而VNode没有，则删除el子节点；如果oldVode没有子节点而Vnode有，则将Vnode的子节点真实化后添加到el；如果两者都有子节点，则执行updateChildren函数比较子节点。
• updateChildren主要做了以下操作：设置新旧VNode的头尾指针；新旧头尾指针进行比较，循环向中间靠拢，根据情况调用patchVnode进行patch重复流程、调用createElem创建一个新节点，从哈希表寻找key一致的VNode节点再分情况操作

vue3中怎么设置全局变量？

1、config.globalProperties
2、vue3新的provide/inject功能可以穿透多层组件，实现数据从父组件传递到子组件
可以将全局变量放在根组件的provide中，这样所有的组件都能使用到这个变量。如果需要变量是响应式的，就需要在provide的时候使用ref或者reactive包装变量。

刷新浏览器之后，vuex的数据是否存在？如何解决？

在vue项目中用vuex来做全局状态管理，发现当刷新网页后，保存在vuex实例store里的数据会丢失。
原因：因为store里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值初始化。
我们有两种方法解决这个问题：
1、使用vuex-along
vuex-along 的实质也是将 vuex 中的数据存放到 localStorage 或者 sessionStroage 中，只不过这个存取过程组件会帮我们完成，我们只需要用vuex的读取数据方式操作就可以了。
2、使用localStorage或者sessionStorage

vue路由中，history和hash两种模式有什么区别？

hash模式是一种把前端路由的路径用井号#拼接在真实URL后面的模式。当井号#后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发hashchange时间。
优点：浏览器兼容性较好，连 IE8 都支持
缺点：路径在井号 # 的后面，比较丑

history模式history API是H5提供的新特性，允许开发者直接更改前端路由，即更新浏览器URL地址而不重新发起请求。
优点：路径比较正规，没有井号 #
缺点：兼容性不如 hash，且需要服务端支持，否则一刷新页面就404了