Vue3的基本概念和设计理念(从此篇而开始二刷Vue3源码)

240 阅读2分钟

Vue设计思想

  • Vue3更注重模块上的拆分,在2.0中无法单独使用部分模块。需要引入完整的Vuejs(例如只想使用响应式部分,但是需要引入完整的Vuejs),Vue3中的模块之间耦合度低,模块可以单独使用
  • Vue2中很多方法挂载到了实例中导致没有使用也会被打包(还有很多组件也是一样)。通过构建工具Tree-shaking机制实现按需引入,减少用户打包后体积。重写API
  • Vue3允许自定义渲染器,扩展能力强,不会发生以前的事情,改写Vue源码改造渲染方式,扩展更方便
  • 依然保留Vue2的特色

声明式框架

  • Vue3依旧是声明式的框架,用起来简单

命令式和声明式区别

  • 早在JQ的时代编写的代码都是命令式的,命令式框架重要特点就是关注过程
  • 声明式框架更加关注结果。命令式的代码封装到了Vuejs中,过程靠vuejs来实现
  • 声明式代码更加简单,不需要关注实现,按照要求填写代码就可以

image.png

采用虚拟DOM

传统更新页面,拼接一个完整的字符串innerHTML全部重新渲染,添加虚拟DOM后,可以比较新旧虚拟节点,找到变化在进行更新。虚拟DOM就是一个对象,用来描述真实DOM的

image.png

区分编译时和运行时

  • 我们需要有一个虚拟DOM,调用渲染方法将虚拟DOM渲染成真实DOM(缺点就是虚拟DOM编写麻烦)
  • 专门写个编译时可以将模板编译成虚拟DOM(在构建的时候进行编译性能更高,不需要再运行的时候进行编译,而且vue3在编译汇总做了很多优化)