一、ref、reactive的区别
功能：ref可以用于任何类型，ref如果对象的话，内部对对象执行reactive；reactive用于对象或数组
返回值：ref返回的是RefImpl；reactive返回的是proxy对象
访问方式：ref通过.valeu访问；reactive直接访问就可以
二、keep-alive
功能：组件切换时，保持组件的状态
使用场景：适用于频繁切换，还需要保持状态的
实现原理：keep-alive只是一个包裹器，内部有一个map缓存，key为组件的name，value组件实例。如果命中缓存则复用vnode，未命中则正常渲染组件
生命周期：
- 第一次进入：setup，onBeforeMount，onMounted，onActivated
- 离开：onDeactivated
- 再次进入：onActivated
- 彻底销毁：onUnmounted
javascript
体验AI代码助手
代码解读
复制代码
<template>
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" v-if="$route.meta.keepAlive" />
</keep-alive>
<component :is="Component" v-if="!$route.meta.keepAlive" />
</router-view>
</template>
三、异步组件 & 路由懒加载
- 异步组件：
defineAsyncComponent组件级别的，如果不是首屏展示的组件，大型的组件可以用这个方法。打包的时候会打包单独的chunk，当该组件渲染的时候，才会加载js，可以用于性能优化
缓存：组件代码会缓存，组件实例如果缓存，需要配合keep-alive
- 路由懒加载：路由级别的，会打包单独的chunk
四、vue-router
- vue2&vue3区别： 使用方式不同，vue3组合式api；vue2是options方式。
- hash模式，history模式：底层hash监听的hashchange变化，；history监听的是popstate，history.pushState(state, '', '/user')，history.replaceState(state, '', '/user')；
- 全局守卫，beforeEach可以设置title，背景颜色等
五、diff算法的区别
vue2：
- 双端比较，四个指针（首-首，首-尾，尾-首，尾-尾），循环比较，移动节点，中间剩余节点采用暴力算法，两层循环移动到正确的位置。时间复杂度o(n^2)
vue3：
- LIS：四个指针，剩余节点，采用Map标记，跟LIS算法（生成newIndexSeq，旧节点在新节点中的位置，不存在的为-，计算LIS（最长递增子序列）不需要移动的节点，LIS 外节点移动到正确位置），最小移动距离，时间复杂度O(n log n)
- Block Tree：运行时优化，构建静态树，更新时只遍历这些节点
- Patch Flags：编译时优化，给VNode打标记，TEXT、CLASS、STYLE、PROPS，只处理动态变化的部分，不对整个vNode进行diff。v-once强制不比较
- Fragment：运行时优化，取消了单根节点的限制，多个同级子节点间互不影响，某个节点发生变化，不会触发别的vNode diff
六、Vuex 跟 Pinia
vuex：
- getter，state，mutations，actions（异步操作），module（模块化）
- 底层是用reactive实现的响应式，
- 结合localstorage实现持久化存储
pinia：
- composition API
- actions，统一处理
- 模块化
- 更轻量，体积小
七、vue3 跟 vue2的区别
-
diff算法优化
-
Composition api
-
proxy，object.defineProperty
-
api的变化，生命周期
