知识点归纳
- MVC与MVVM模式的区别⭐⭐⭐⭐⭐
- vue的生命周期⭐⭐⭐⭐⭐
- Vue-router
- Vue组件之间的通信方式⭐⭐⭐⭐⭐
- VUE的相关语法问题
- vue 的双向绑定的原理是什么⭐⭐⭐⭐⭐
- diff算法⭐⭐⭐⭐⭐
1. vue有哪些比其他框架好的性能优化点❗
Vue.js 在性能优化方面有几个显著的优势：
- (1) 虚拟 DOM：Vue 通过使用虚拟 DOM 来高效地追踪和更新DOM。虚拟 DOM 是一种轻量级的表现形式，它记录了真实 DOM 状态的快照。当数据改变时，Vue 会比对新旧虚拟 DOM 树之间的差异，并只应用必要的改变到真实 DOM 上。
- (2) 组件化：Vue 组件可以封装自己的逻辑和模板，使得开发者能够以组件为单位进行开发和复用，从而减少不必要的重渲染。
- (3) 生命周期钩子：Vue 提供的生命周期钩子（如
created,mounted,updated等）可以帮助开发者在合适的时机进行性能优化。 - (4) 数据响应式系统：Vue 使用数据响应式系统，只更新变更的部分，而不是重新渲染整个组件。这大大提高了性能，尤其是在处理大型列表和组件时。
- (5) 懒加载与预加载：Vue 支持懒加载和预加载，可以帮助优化加载时间，减少首屏加载时间。
- (6) 使用工具库：结合诸如 Webpack、Babel 这样的构建工具，可以帮助优化项目的打包大小和编译速度。
2.vue2有哪些不足，可以怎么解决❗
| 不足 | 描述 | 解决方法 |
|---|---|---|
| TypeScript支持不是很完善 | 升级到Vue 3 | |
| 无法响应新增属性 | 在Vue2中，只有在实例被创建时就存在的属性才会被观察。在已经创建的实例上动态添加新的属性，Vue无法检测到这些属性的变化。 | 需要使用 Vue.set或Vue.$set方法来添加响应式属性 |
| 无法响应数组索引和length的变化 | Vue2无法检测到通过索引设置数组元素的变化，以及直接修改数组的length属性。 | 需要使用特定的数组方法，如push，pop，splice等，或者通过使用Vue.set方法来修改数组 |
3. vue3 相比于vue2有什么升级/差别❗ ⭐⭐⭐⭐
| 差别 | 描述 |
|---|---|
| 更好的响应式系统 | 使用 Proxy 代替 Object.defineProperty，可以更方便地处理嵌套对象和数组的变化 |
| Composition API | Vue 3 引入了 Composition API，替代Vue2中的选项式API（Options API），可以让开发者更灵活地组织和复用逻辑代码，更好的类型推断 |
| 采用 TypeScript 编写 | 提供了更好的类型推断和类型检查，并提供了全面的类型定义文件（d.ts），能更好地支持 ts |
| 虚拟DOM重写 | Vue3的虚拟DOM算法进行了重写，采用了类似React的静态标记和动态补丁的机制，提供了更高效的渲染性能。 |
| Tree-shaking支持 | Vue3通过ES模块的方式组织代码，在构建工具支持的情况下，能够更好地进行Tree-shaking，减小打包体积。 |
| 性能优化 | Vue 3在许多方面进行了性能优化，如编译时的优化、渲染的优化、内存占用的优化等，提供了更高效和更快速的运行时性能。 |
？？？【Vue优化方式】⭐⭐⭐⭐⭐
- spa 使用 keep-alive
- key 的使用
- v-if 和v-show
- v-if 不要和 v-for 一起使用
v-for 的优先级要早于 v-if，如果一起使用的话，会先遍历在判断 v-if，会造成性能问题； - 使用
Object.freeze()方式冻结data中的属性，从而阻止数据劫持 - 组件销毁的时候会断开所有与实例联系，但是除了addEventListener，所以当一个组件销毁的时候需要手动去removeEventListener
- 图片懒加载
- 路由懒加载
- 防抖节流
- 长列表固定个数？？
- 为减少重新渲染和创建dom节点的时间，采用虚拟dom
documentFragment 和一次性渲染有什么不同⭐⭐⭐⭐
- documentFrament 首先是**虚拟**的，它的节点增加与删除肯定不会引起 dom 的变化的，所以如果增加节点或者删除节点使用 createDocumentFrament 的话会减少回流的操作。
- Vue 也是使用了 CreateDocumentFragment 的。如果初次渲染，使用 documentFragment会多一个步骤，也就是创建这个documentFragment的步骤，所以一般首次加载是很慢的。
Vue2 中的 mixin 原理是什么？
在Vue 2中，mixin是一种用于重用组件选项的机制。它允许将共享的逻辑、方法和数据注入到多个组件中，以实现代码的复用和组件的扩展。
Mixin的原理可以简单描述为以下几个步骤：
- 创建一个mixin对象，该对象包含需要被复用的选项，例如：methods、data、computed等。
- 在定义组件时，通过mixins属性将mixin对象添加到组件的选项中。可以一次添加一个或多个mixin对象。
- 当组件实例化时，Vue会按照一定的优先级顺序合并组件的选项。合并过程将组件自身的选项与mixin对象的选项进行合并，并解决可能的命名冲突。
- 合并后的选项将用于创建组件的实例，从而继承了mixin对象中定义的属性和方法。
- 总结来说，Vue 2中的mixin原理是通过将多个mixin对象的选项与组件的选项进行合并，从而使得组件可以继承、复用和扩展mixin对象中的属性和方法。这样就能够减少重复的代码，并提高开发效率。
- 然而，使用mixin也可能导致命名冲突和混乱，因此需要小心使用和管理mixin对象。
