Vue 设计与原理读 vue 源码之前可以先了解的内容，更有助于学习源码，Vue 设计与原理（Vue 设计与原理）书一

（Vue 设计与原理）书一点点小的总结

框架基本知识

框架的范式

声明式关注结果（jq 是关注结果）

<div @click="()=>{console.log('你好 世界')}">hello world</div>

性能和可维护性的权衡

命令式代码的更新执行消耗 = 直接更改的性能消耗

声明式代码的更新性能消耗 = 直接更改代码的消耗 + 找出差异的性能消耗

以上可以看出声明式的代码并不优于命令式代码，这里为什Vue 还是选择了声明式的框架，原因是代码的可维护性更强的，在开发的时候我们不在关注过程更注重结果的。

虚拟Dom的性能到底如何

由于上边所说的原因，希望声明式的代码的性能更接近命令式的代码性能，虚拟DOM 的的更新技术让代码的性能比原声JS 的性能更高

对上图的总结：

原生JS 操作DOM 的性能是最高的，但是负担最高，需要操作大量的DOM ，大量的DOM 删除、新增、修改

innerHTML ，是通过拼接的字符串和原生JS 相结合，如果模版比较大，更新的性能最差，特别是模版大，少量更新的时候

虚拟DOM 负担最小，可维护性更高

运行和编译

前端同学比较关注就是三个类型：运行时、运行时+编译时、编译时

这里说一下vue 是一个运行时（render将树形结构的对象编译成函数渲染） + 编译时 （compiler ，就是将dom 编译成树形结构的对象）

运行时：框架做的工作就是对一个树形结构的数据进行递归，将数据渲染成DOM 结构

编译时：就是 compiler ，就是将dom 编译成树形结构的对象

框架设计的核心要素

给用户更好的开发体验，友好的警告⚠️ （源码中的）

if(template[0] === '#'){
  const el = document.querySelector(template)
  if(__DEV__ && !el){
    warn(`Template element not found or is empty:${template}`)
  }
}

控制框架代码的体积

在实现同样功能下，代码体积越小越好，下载资源越少，上边的警告信息只有在开发的时候才会运行，正式打包之后不会提供警告信息。Vue.js 每个打印警告信息都有个__DEV__常量

做良好的Tree-Shaking

指的是消除那些永远不会执行的代码，在前端领域这个概念rollup.js 而普及，webpack都支持。但是模块必须是ESM，因为Tree-Shaking 依赖ESM静态结构

Tree-shaking 如果一个函数的调用会参数副作用，就不能将其移出，rollup.js和webpack以及一些压缩工具都会识别 /#PURE/ , vue3源码中有大量使用

Vue 设计与原理