在这里主要比较虚拟DOM、js原生方法操作 DOM、innerHTML 这三者的性能优劣

1. js原生方法操作DOM - 性能最高，但是可维护性差，心智负担大
2. 虚拟DOM - 性能不错，可维护性高，心智负担小（由框架集成，基本不需要考虑，性能取决于更新数据量）
3. innerHTML - 心智负担中等，性能差 （每次都是新建DOM节点，没有复用，模板越大性能越差）

运行时、编译时、运行时+编译时

1. 运行时 (仅提供运行时的渲染逻辑)

   const obj = {
    tag: 'div',
    children: [
      { tag: 'span', children: 'hello world' }
    ]
   }
   // 渲染到 body 下
   Render(obj, document.body)
   

2. 编译时

   直接在编译的时候将代码转成最终命令式的代码，不需要运行时再解析

3. 运行时+编译时

   const html = `
     <div>
     <span>hello world</span>
     </div>
   `
   // 调用 Compiler 编译得到树型结构的数据对象
   const obj = Compiler(html)
   // 再调用 Render 进行渲染
   Render(obj, document.body)
   

   Vue.js 3 仍然保持了运行时 + 编译时的架构，在保持灵活性的基础上能够尽可能地去优化。