为什么要学源码

  • 技术是第一生产力
  • 学习 API 的设计目标、思路、取舍
  • 学习优良的代码格调
  • 学习组织代码的形式
  • 学习实现办法的技巧
  • 学习 ES67 新 API、TS 高级用法
  • 不给本人设限，不要让你四周人的技术下限成为你的下限
  • 面试加分项
  • 装逼利器

学习源码副作用

  • 画虎不成反类犬（强行下马 vue3，本人焦头烂额、我的项目难以保护、共事苦不堪言）
  • 为了用而用，而不是就地取材
  • 喜爱炫技写一下看似搞大上，理论没有可读性，影响团队合作的奇技淫巧

vue3 设计动机与目标

  • 更好的逻辑复用与代码组织

    • vue2 option api 的代码格调将同一逻辑点的代码扩散在各处，会导致读者关注点拆散，也不利于代码的逻辑复用；而 vue3 composition api 将同一业务逻辑的代码聚合在一起命名为 useXXX 函数，再通过 setup 将不同的逻辑组装起来并返回给组件 data，显著更不便逻辑复用。
    • vue2 mixin 用于逻辑复用的时候容易导致命名抵触和数据起源不清晰；而 vue3 provide/inject 配合 composition api 能够很不便的找到数据起源并通过解构重命名，显著更不便逻辑复用。

  • 更好的类型推导

    • 在 methods 中 this 指向组件实例而不是 method 自身，不利于类型推导。
    • 例如 this.router、this.store，每个新的插件都会须要向 Vue 追加类型定义。

更新前后比照

优化

  • 打包更小（全局 API tree-shaking）
  • 渲染、更新更快，内存占用缩小
  • 应用 proxy 取代 Object.defineProperty
  • v-model 代替以前的 v-model 和.sync
  • 生命周期变更 例如 destroyed beforeDestroy 改为 unmounted beforeUnmount
  • 自定义指令 API 与生命周期保持一致
  • Diff 算法的晋升（动态标记、动态晋升）

新个性

  • Template 反对多个根标签
  • composition API 实现逻辑模块化和复用
  • Teleport 传送门组件 代码块挂载到任意地位
  • Suspense 悬停组件 异步加载组件应用（试验属性）
  • 应用 @vue/runtime-core 的 createRenderer 自定义渲染器（跨平台利器）
  • 应用 ts 编写源码，更好的类型推导、更好的适配 ts

更多变动

  • v3.cn.vuejs.org/guide/migra…

疑难解答

问题一：compostion api 基本没有解决任何问题，只是追赶新玩意的货色

尤雨溪： 不批准这个观点。
Vue 最开始很小，然而当初被广泛应用到不同级别复杂度的业务畛域，有些能够基于 option API 很轻松解决，然而有些不能够。例如上面的场景：

  • 有很多逻辑的大型组件（数百行）
  • 在多个组件可复用的逻辑

对于问题 1，你须要把每个逻辑拆分到不同选项，例如，一段逻辑须要一些响应数据，一个计算属性，一些监听属性还有办法。你去理解这段逻辑时，须要一直高低挪动浏览，尽管你晓得一些属性是什么类型，然而你并不知道他具体的作用。当一个组件蕴含多个逻辑，状况就更蹩脚了。如果用新的 API，能够将数据和逻辑组合在一起，最重要的是，你能够洁净的把这些逻辑提取到一个函数，甚至一个独自的文件中。

问题二：应用新 API 导致逻辑扩散到不同中央，违反"关注点拆散"

尤雨溪： 这个问题和我的项目文件组织形式问题相似。咱们很多人都批准按文件类型组织（布局放 HTML，款式 CSS，逻辑 JS）并不是正确的形式，因为强制把相干代码宰割到三个文件，只是给人一种“关注点拆散”的错觉。这里的要害是“关注点”不是由文件类型定义。相同，咱们大多数抉择以性能或者职责来组织文件，这正是人们喜爱 Vue 单文件组件的起因。SFC 就是按性能组织代码的办法，但讥刺的是当首次引入 SFC 时，许多人也是回绝的，认为它违反了关注点拆散。

问题三：新的语法让 Vue 失去简略性，导致"意大利面条式代码"的呈现，升高我的项目维护性。

尤雨溪： 正好相同，新的 API 就是为了进步我的项目长期维护性的。如果咱们查看任何 javascript 我的项目，都会从入口文件开始浏览，该文件的实质是你的利用启动时被隐式调用的"main"函数。如果只有一个函数入口，会导致意大利面条代码，那所有的 js 我的项目都是意大利面条代码。显然不是的，因为开发人员通过代码模块化或者较小的函数来组织代码。另外，我批准新的 API 实践上会升高代码品质的最低门槛。然而咱们能够应用以往避免代码变成意大利面条的伎俩缓解这种状况。另一方面，新的 API 能够晋升代码品质的最高下限，相比 option api，你能够重构为品质更高的代码。而且，基于 Option api 你还得解决相似 mixins 的问题。很多人认为"Vue 失去简略性"，实际上只是失去组件内代码类型查看能力（就是你不晓得一个变量时 data、method、还是 computed）。然而用新的 API，实现一个类型检测器也是非常容易实现以前的个性的。也就是说，你不应该被 option api 限度思维，而更多关注逻辑内聚问题。

源码调试

  • 装置源码及依赖（装置依赖出错个别是 npm 淘宝源的问题或者须要梯子）
git clone https://github.com/vuejs/vue-next.gityarn installyarn dev --sourcemap
  • 在源码中打入 debugger
  • 对源码进行打包
yarn dev --sourcemap
  • 新建 packages/vue/examples/index.html 用于测试

参考Vue3源码视频解说：进入学习

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title></head><body><div id="app">  <div>    <div>test demo {{msg}}</div>    <div>test demo {{msgMore}}</div>  </div></div><script src="../dist/vue.global.js"></script><script>  Vue.createApp({    setup() {      const msg = Vue.ref('Hello')      const msgMore = Vue.computed(()=>msg.value+' world')      return {        msg,        msgMore      }    }  }).mount('#app')</script></body></html>
  • 谷歌浏览器关上 index.html F12