xuasir / vue3-analysis

vue3 源码分析

Home Page:https://xus-code.github.io/vue3-analysis/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

title home actionText actionLink meta
Vue3解析
true
开始 →
/v3/idea/vue
name content
og:title
Vue3解析
name content
og:description
全面系统的了解Vue3

引言

在学习Vue3期间断断续续查阅了各种资料,但是一直没有找到一份完整的系统的对Vue3进行剖析的资料, 于是决定写这一整个Vue3解析也是希望能系统全面的概括到Vue3的大部分内容;在构思这整个Vue3解析时, 先后看了尤大的state of vue3vue conf等等演讲内容感觉受益匪浅, 于是决定在开始Vue3解析前好好聊一聊vue的设计理念、升级重心等等前置内容。

Vue2的时代,通过数据驱动和组件化系统已经将视图开发简化到一个非常直观的层次,基本上简单熟悉下一下API就能做出一个不错的系统; 快速上手固然很好,但是不曾了解原理可能会产生一些困惑,例如:

  1. vue内部修改了模板依赖的属性或者值,需要在nextTick中访问到dom的同步更改
  2. 对于定义好的响应式对象不能够动态的添加新的元素和属性(Vue2.x),否则新增加的属性会没有响应式效果
  3. ......

其中一些困惑可能来自vue运行机制带来的心智负担,也有一些来自实现vue特性所使用JavaScript语言版本的局限; 对于阅读理解一个框架来说,如果我们从API入手可能不是那么合理,因为API的设计封装是服务于框架抽象的模式与设计理念的, 当我们我们理解完一个API的实现后,如果没有对整体系统设计的了解总是会被某某API为什么要这样实现所困惑; 所以从框架的设计理念入手再深入到API的实现就会显得更加合理一些,我们有必要适当的了解vue背后的设计理念; 框架的实施践行设计者的**,如果我们能带着对框架本身架构设计的思考去阅读源码,肯定是可以 get 到更多知识点的, 同时这也让我们的理解更加立体,在深入到源码中时能更加容易的串联整体。

内容安排

理念篇

主要关注Vue3的升级重心和Vue设计**

运行时篇

主要关注组件系统和运行时调度以及VNode相关知识点

响应式系统

主要关注响应式API的实现

扩展篇

主要关注内建组件和实用特性例如:PropsSlot和指令等等

About

vue3 源码分析

https://xus-code.github.io/vue3-analysis/


Languages

Language:JavaScript 94.2%Language:Vue 5.8%