Vue

Vue.js是一个用于创建用户界面的JavaScript框架，也是一个创建单页应用的Web应用框架。

核心特性

数据驱动（MVVM）

• Model（模型层）： 负责处理业务逻辑以及和服务端进行交互 。
• View（视图层）： 负责将数据模型转化为UI展示出来，可以理解为HTML页面 。
• ViewModel（视图模型层）： 用来连接Model和View，是Model和View之间的通讯桥梁；主要功能就是数据变化时维护DOM更新。

组件化思想

• 从UI界面的角度分析，把一些可复用的UI元素，抽离为单个组件，便于项目的维护和开发。
• 多个组件可以组合成组件库，方便调用和复用，组件间也可以嵌套，小组件组合成大组件。
• 降低整个系统的耦合度，在保持接口不变的情况下，可以替换不同的组件快速完成需求。
• 调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题。
• 提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级。

指令系统

指令 (Directives) 是带有 v- 前缀的特殊属性，作用是当表达式的值改变时，响应式地作用于 DOM。

• 双向数据绑定指令（v-model）。
• 条件渲染指令（v-if、v-show）。
• 列表渲染指令（v-for）。
• 属性绑定指令（v-bind）。
• 事件绑定指令（v-on）。

Vue3变化

• 响应式原理：通过Proxy进行数据拦截，能够监听对象和数组的新增、删除操作。
• 组合式 API (Composition API)：将相关逻辑集中在一起，增强了代码的可读性和内聚性。相比之下，Vue2 的选项式 API 会将逻辑分散在不同的位置。
• 生命周期调整：部分生命周期钩子函数名称变化；setup代替了beforeCreate和created作为Composition Api的入口；新增onRenderTracked和onRenderTriggered。
• 体积减少：通过tree-shaking功能，仅打包需要的模块代码。
• 虚拟 DOM 优化：
  • 在虚拟 DOM 上增加了patchFlag 字段标记静态节点，Diff时跳过静态节点，减少不必要的比较。
  • 静态提升，缓存静态节点，避免重复创建。
  • 最长递增子序列算法代替双指针遍历策略。
• 见不到this的使用，减少了this指向不明的情况。
• 更好的TS支持。