Vue3设计思想和理念

一、声明式框架

Vue3是声明式框架，用起来简单。

命令式和声明式区别

• 早在JQ的时代编写的代码都是命令式的，命令式框架重要特点就是关注过程，性能更强，控制度更高，手动优化空间更大。
• 声明式框架更加关注结果。命令式的代码封装到了Vuejs中，过程靠Vuejs来实现，使用方便，效率高。

声明式代码更加简单，不需要关注实现，按照要求填代码就可以（给上原材料就出结果）

// 命令式编程
let numbers = [1,2,3,4,5]
let total = 0
for(let i = 0;i < numbers.length;i++) {
    total += numbers[i] // 关注过程
}
console.log(total)

// 声明式编程
let total2 = numbers.reduce((memo, current) => memo + current), 0)
console.log(total2)

二、采用虚拟DOM

传统更新页面，需要拼接一个完整的字符串innerHTML全部重新渲染，或多次操纵真实DOM API。某些情况会造成成本过高。

添加虚拟DOM后，可以比较新旧虚拟DOM节点，找到变化节点进行更新。虚拟DOM就是一个对象，用来描述真实DOM的。

两大优势： 1.高效Diff算法 2.跨平台解决方案 3.编译时优化

const vnode = {
    __v_isVNode: true,
    __v_skip: true,
    type,
    props,
    key: props && normalizeKey(props),
    ref: props && normalizeRef(props),
    children,
    component: null,
    el: null,
    patchFlag,
    dynamicPorps,
    dynamicChildren: null,
    appContext: null,
}

三、区分编译时和运行时

• 我们需要一个虚拟DOM，调用渲染方法将虚拟DOM渲染成真实ODM（缺点就是虚拟DOM编写麻烦）
• 专门写个编译时，可以将模板编译成虚拟DOM。在构建的时候进行编译性能更高，不需要在运行时重复编译，而且Vue3在编译中做了很多优化。

四、Vue3的设计细想

• Vue3注重模块上拆分Vue3中的模块之间耦合度低，每个模块可以独立使用。拆分模块
• 通过构建工具Tree-shaking机制实现按需引入，减少用户打包后体积。组合式API
• Vue3允许自定义渲染器，拓展能力强。拓展更方便
• 使用RFC来确保改动和设计都是经过Vuejs核心团队探讨并得到确认的。也让用户可以了解每一个功能采用或废弃的前因后果。采用RFC