框架抽象 ​

层级划分（三层）：

• 应用层面
  • 组件层面
    • 节点层面

工作原理 ​

UI = f(state)

视图 = 框架内部运行机制(状态)

框架内部的运行机制根据状态渲染视图

不同框架的区别 ​

不同框架的区别主要是更新粒度的区别

1. 节点级更新粒度 - Svelte ​

关键词: 预编译 细粒度更新

原理:

1. 将状态变化可能导致的节点变化编译为具体方法
2. 监听状态变化
3. 当交互导致状态变化后直接调用具体方法, 改变对应视图

例子:

<h1 on:click={handleClick}>{}count</h1>

1. 将cout状态变化可能导致h1内的文本节点变化, 编译为update方法, 即:预编译过程

   // 每次调用update方法, 如果count状态变化, 就更新视图中对应的文本节点
    function update(ctx, [dirty]) {
      if (dirty & /*count*/ 1) {
        set_data_dev(t0, /*count*/ ctx[0]);
      }
    }

   1
   2
   3
   4
   5
   6
   

2. 监听状态变化, 采用"发布订阅"的设计模式, 通过这种方式, 框架能对每个状态变化作出反应, 即实现细粒度更新

   1. 订阅: 每当创建一个状态后, 会为该状态维护一个订阅该状态变化的表, 所有需要监听该状态变化的回调函数都会在该表中注册
   2. 发布: 每当状态变化, 会遍历这个表, 将"状态变了"这一消息发布出去, 每个订阅该状态的回调函数都会接受到通知并执行

代表: Svelte, Solid.js

2. 应用级更新框架 - React ​

关键词: 虚拟DOM

节点级框架需要监听状态的变化, 应用级框架则不关心状态的变化, 因为应用级框架中, 任何一个状态变化, 都会创建一颗完整的虚拟DOM树, 框架会通过前后虚拟DOM的对比找到变化的部分, 最终将变化的状态更新到视图

1. 状态变化
2. 创建一棵完整的虚拟DOM树
3. 比较, 并将变化的部分更新到视图

3. 组件级更新框架 - Vue ​

关键词:

Vue2 虚拟DOM+细粒度更新

Vue3 虚拟DOM+预编译+细粒度更新

1. 状态变化
2. 针对组件层面, 创建一棵组件级虚拟DOM树
3. 比较, 并将变化的部分更新到视图