数据驱动

小咪咪 2022-05-14 04:07 259阅读 0赞

Vue.js    ⼀个核⼼思想是数据驱动。所谓数据驱动，是指视图是由数据驱动⽣成的，我们对视图的修改， 不会直接操作    DOM，⽽是通过修改数据。它相⽐我们传统的前端开发，如使⽤    jQuery    等前端库直接 修改    DOM，⼤⼤简化了代码量。特别是当交互复杂的时候，只关⼼数据的修改会让代码的逻辑变的⾮ 常清晰，因为    DOM    变成了数据的映射，我们所有的逻辑都是对数据的修改，⽽不⽤碰触    DOM，这样 的代码⾮常利于维护。 在    Vue.js    中我们可以采⽤简洁的模板语法来声明式的将数据渲染为    DOM：  
![70][]

最终它会在⻚⾯上渲染出        Hello    Vue    。接下来，我们会从源码⾓度来分析    Vue    是如何实现的，分析 过程会以主线代码为主，重要的分⽀逻辑会放在之后单独分析。数据驱动还有⼀部分是数据更新驱动 视图变化，这⼀块内容我们也会在之后的章节分析，这⼀章我们的⽬标是弄清楚模板和数据如何渲染 成最终的    DOM。

#    new    Vue    发⽣了什么  #

从⼊⼝代码开始分析，我们先来分析        new    Vue        背后发⽣了哪些事情。我们都知道，    new        关键字在 Javascript    语⾔中代表实例化是⼀个对象，⽽        Vue        实际上是⼀个类，类在    Javascript    中是⽤    Function 来实现的，来看⼀下源码，在    src/core/instance/index.js        中。  
![70 1][]

可以看到        Vue        只能通过    new    关键字初始化，然后会调⽤        this.\_init        ⽅法，    该⽅法在    src/core/instance/init.js        中定义。  
![70 2][]

![70 3][]

Vue    初始化主要就⼲了⼏件事情，合并配置，初始化⽣命周期，初始化事件中⼼，初始化渲染，初始 化    data、props、computed、watcher    等等。

总结

Vue    的初始化逻辑写的⾮常清楚，把不同的功能逻辑拆成⼀些单独的函数执⾏，让主线逻辑⼀⽬了 然，这样的编程思想是⾮常值得借鉴和学习的。 由于我们这⼀章的⽬标是弄清楚模板和数据如何渲染成最终的    DOM，所以各种初始化逻辑我们先不 看。在初始化的最后，检测到如果有        el        属性，则调⽤        vm.$mount        ⽅法挂载        vm    ，挂载的⽬标就 是把模板渲染成最终的    DOM，那么接下来我们来分析    Vue    的挂载过程。

#    Vue    实例挂载的实现  #

Vue    中我们是通过        $mount        实例⽅法去挂载        vm        的，    $mount        ⽅法在多个⽂件中都有定义，如    src/platform/web/entry-runtime-withcompiler.js    、    src/platform/web/runtime/index.js    、    src/platform/weex/runtime/index.js    。因为        $mount        这个⽅法的实现是和平台、构建⽅式都相关的。接下来我们重点分析带        compiler    版本的        $monut        实现，因为抛开    webpack    的    vue-loader，我们在纯前端浏览器环境分析    Vue    的⼯作原 理，有助于我们对原理理解的深⼊。    compiler        版本的        $monut        实现⾮常有意思，先来看⼀下        src/platform/web/entry-runtimewith-compiler.js        ⽂件中定义：  
![70 4][]

![70 5][]

这段代码⾸先缓存了原型上的        $mount        ⽅法，再重新定义该⽅法，我们先来分析这段代码。⾸先，它 对        el        做了限制，Vue    不能挂载在        body    、    html        这样的根节点上。接下来的是很关键的逻辑    —— 如果没有定义        render        ⽅法，则会把        el        或者        template        字符串转换成        render        ⽅法。这⾥我们 要牢记，在    Vue    2.0    版本中，所有    Vue    的组件的渲染最终都需要        render        ⽅法，⽆论我们是⽤单⽂件 .vue    ⽅式开发组件，还是写了        el        或者        template        属性，最终都会转换成        render        ⽅法，那么这个 过程是    Vue    的⼀个“在线编译”的过程，它是调⽤        compileToFunctions        ⽅法实现的，编译过程我们之 后会介绍。最后，调⽤原先原型上的        $mount        ⽅法挂载。 原先原型上的        $mount        ⽅法在        src/platform/web/runtime/index.js        中定义，之所以这么设计完 全是为了复⽤，因为它是可以被        runtime    only        版本的    Vue    直接使⽤的。

Vue.prototype.$mount    =    function    (        el?:    string    |    Element,        hydrating?:    boolean ):    Component    \{        el    =    el    &&    inBrowser    ?    query(el)    :    undefined        return    mountComponent(this,    el,    hydrating)

$mount        ⽅法⽀持传⼊    2    个参数，第⼀个是        el    ，它表⽰挂载的元素，可以是字符串，也可以是 DOM    对象，如果是字符串在浏览器环境下会调⽤        query        ⽅法转换成    DOM    对象的。第⼆个参数是和 服务端渲染相关，在浏览器环境下我们不需要传第⼆个参数。    $mount        ⽅法实际上会去调⽤        mountComponent        ⽅法，这个⽅法定义在    src/core/instance/lifecycle.js        ⽂件中：  
![70 6][]

![70 7][]

从上⾯的代码可以看到，    mountComponent        核⼼就是先调⽤        vm.\_render        ⽅法先⽣成虚拟    Node，再 实例化⼀个渲染    Watcher    ，在它的回调函数中会调⽤        updateComponent        ⽅法，最终调⽤    vm.\_update        更新    DOM。    Watcher        在这⾥起到两个作⽤，⼀个是初始化的时候会执⾏回调函数，另⼀个是当    vm    实例中的监测 的数据发⽣变化的时候执⾏回调函数，这块⼉我们会在之后的章节中介绍。 函数最后判断为根节点的时候设置        vm.\_isMounted        为        true    ，    表⽰这个实例已经挂载了，同时执⾏    mounted        钩⼦函数。    这⾥注意        vm.$vnode        表⽰    Vue    实例的⽗虚拟    Node，所以它为        Null        则表⽰ 当前是根    Vue    的实例。

总结    mountComponent        ⽅法的逻辑也是⾮常清晰的，它会完成整个渲染⼯作，接下来我们要重点分析其中 的细节，也就是最核⼼的    2    个⽅法：    vm.\_render        和        vm.\_update    。

# render #

Vue    的        \_render        ⽅法是实例的⼀个私有⽅法，它⽤来把实例渲染成⼀个虚拟    Node。它的定义在    src/core/instance/render.js        ⽂件中：

![70 8][]

![70 9][]

这段代码最关键的是        render        ⽅法的调⽤，我们在平时的开发⼯作中⼿写        render        ⽅法的场景⽐较 少，⽽写的⽐较多的是        template        模板，在之前的        mounted        ⽅法的实现中，会把        template        编译 成        render        ⽅法，但这个编译过程是⾮常复杂的，我们不打算在这⾥展开讲，之后会专门花⼀个章节 来分析    Vue    的编译过程。 在    Vue    的官⽅⽂档中介绍了        render        函数的第⼀个参数是        createElement    ，那么结合之前的例⼦：  
<div    id="app">        \{ \{    message    \}\} </div>

相当于我们编写如下        render        函数：  
![70 10][]

# Virtual    DOM  #

Virtual    DOM    这个概念相信⼤部分⼈都不会陌⽣，它产⽣的前提是浏览器中的    DOM    是很“昂贵"的，为 了更直观的感受，我们可以简单的把⼀个简单的    div    元素的属性都打印出来，如图所⽰：  
![70 11][]

![70 12][]

可以看到    Vue.js    中的    Virtual    DOM    的定义还是略微复杂⼀些的，因为它这⾥包含了很多    Vue.js    的特 性。这⾥千万不要被这些茫茫多的属性吓到，实际上    Vue.js    中    Virtual    DOM    是借鉴了⼀个开源库 snabbdom    的实现，然后加⼊了⼀些    Vue.js    特⾊的东⻄。我建议⼤家如果想深⼊了解    Vue.js    的    Virtual DOM    前不妨先阅读这个库的源码，因为它更加简单和纯粹。

总结

其实    VNode    是对真实    DOM    的⼀种抽象描述，它的核⼼定义⽆⾮就⼏个关键属性，标签名、数据、⼦ 节点、键值等，其它属性都是都是⽤来扩展    VNode    的灵活性以及实现⼀些特殊    feature    的。由于    VNode 只是⽤来映射到真实    DOM    的渲染，不需要包含操作    DOM    的⽅法，因此它是⾮常轻量和简单的。 Virtual    DOM    除了它的数据结构的定义，映射到真实的    DOM    实际上要经历    VNode    的    create、diff、 patch    等过程。那么在    Vue.js    中，VNode    的    create    是通过之前提到的        createElement        ⽅法创建的，我 们接下来分析这部分的实现。

# createElement #

![70 13][]

![70 14][]

![70 15][]

# children    的规范化 #

由于    Virtual    DOM    实际上是⼀个树状结构，每⼀个    VNode    可能会有若⼲个⼦节点，这些⼦节点应该也 是    VNode    的类型。    \_createElement        接收的第    4    个参数    children    是任意类型的，因此我们需要把它们 规范成    VNode    类型。 这⾥根据        normalizationType        的不同，调⽤了        normalizeChildren(children)        和    simpleNormalizeChildren(children)        ⽅法，它们的定义都在    src/core/vdom/helpers/normalzie-children.js        中：  
![70 16][]

simpleNormalizeChildren        ⽅法调⽤场景是        render        函数当函数是编译⽣成的。理论上编译⽣成的    children        都已经是    VNode    类型的，但这⾥有⼀个例外，就是        functional    component        函数式组件 返回的是⼀个数组⽽不是⼀个根节点，所以会通过        Array.prototype.concat        ⽅法把整个    children        数组打平，让它的深度只有⼀层。    normalizeChildren        ⽅法的调⽤场景有    2    种，⼀个场景是        render        函数是⽤户⼿写的，当    children        只有⼀个节点的时候，Vue.js    从接⼝层⾯允许⽤户把        children        写成基础类型⽤来创建单 个简单的⽂本节点，这种情况会调⽤        createTextVNode        创建⼀个⽂本节点的    VNode；另⼀个场景是 当编译        slot    、    v-for        的时候会产⽣嵌套数组的情况，会调⽤        normalizeArrayChildren        ⽅法， 接下来看⼀下它的实现：

![70 17][]

![70 18][]

**    normalizeArrayChildren        接收    2    个参数，    children        表⽰要规范的⼦节点，    nestedIndex        表⽰ 嵌套的索引，因为单个        child        可能是⼀个数组类型。        normalizeArrayChildren        主要的逻辑就是 遍历        children    ，获得单个节点        c    ，然后对        c        的类型判断，如果是⼀个数组类型，则递归调⽤    normalizeArrayChildren    ;    如果是基础类型，则通过        createTextVNode        ⽅法转换成    VNode    类型； 否则就已经是    VNode    类型了，如果        children        是⼀个列表并且列表还存在嵌套的情况，则根据    nestedIndex        去更新它的    key。这⾥需要注意⼀点，在遍历的过程中，对这    3    种情况都做了如下处 理：如果存在两个连续的        text        节点，会把它们合并成⼀个        text        节点。 经过对        children        的规范化，    children        变成了⼀个类型为    VNode    的    Array。**

#  VNode    的创建  #

![70 19][]

总结

那么⾄此，我们⼤致了解了        createElement        创建    VNode    的过程，每个    VNode    有    children    ，    children        每个元素也是⼀个    VNode，这样就形成了⼀个    VNode    Tree，它很好的描述 了我们的    DOM    Tree。 回到        mountComponent        函数的过程，我们已经知道        vm.\_render        是如何创建了⼀个    VNode，接下来 就是要把这个    VNode    渲染成⼀个真实的    DOM    并渲染出来，这个过程是通过        vm.\_update        完成的， 接下来分析⼀下这个过程。

# update #

![70 20][]

![70 21][]

![70 22][]

![70 23][]

createPatchFunction        内部定义了⼀系列的辅助⽅法，最终返回了⼀个        patch        ⽅法，这个⽅法就 赋值给了        vm.\_update        函数⾥调⽤的        vm.\_\_patch\_\_    。 在介绍        patch        的⽅法实现之前，我们可以思考⼀下为何    Vue.js    源码绕了这么⼀⼤圈，把相关代码分 散到各个⽬录。因为前⾯介绍过，    patch        是平台相关的，在    Web    和    Weex    环境，它们把虚拟    DOM    映 射到    “平台    DOM”    的⽅法是不同的，并且对    “DOM”    包括的属性模块创建和更新也不尽相同。因此每个  
update  
47  
平台都有各⾃的        nodeOps        和        modules    ，它们的代码需要托管在        src/platforms        这个⼤⽬录下。 ⽽不同平台的        patch        的主要逻辑部分是相同的，所以这部分公共的部分托管在        core        这个⼤⽬录 下。差异化部分只需要通过参数来区别，这⾥⽤到了⼀个函数柯⾥化的技巧，通过    createPatchFunction        把差异化参数提前固化，这样不⽤每次调⽤        patch        的时候都传递    nodeOps        和        modules        了，这种编程技巧也⾮常值得学习。 在这⾥，    nodeOps        表⽰对    “平台    DOM”    的⼀些操作⽅法，    modules        表⽰平台的⼀些模块，它们会在 整个        patch        过程的不同阶段执⾏相应的钩⼦函数。这些代码的具体实现会在之后的章节介绍。 回到        patch        ⽅法本⾝，它接收    4个参数，    oldVnode        表⽰旧的    VNode    节点，它也可以不存在或者是 ⼀个    DOM    对象；    vnode        表⽰执⾏        \_render        后返回的    VNode    的节点；    hydrating        表⽰是否是服 务端渲染；    removeOnly        是给        transition-group        ⽤的，之后会介绍。    patch        的逻辑看上去相对复杂，因为它有着⾮常多的分⽀逻辑，为了⽅便理解，我们并不会在这⾥ 介绍所有的逻辑，仅会针对我们之前的例⼦分析它的执⾏逻辑。之后我们对其它场景做源码分析的时 候会再次回顾        patch        ⽅法。 先来回顾我们的例⼦：

![70 24][]

![70 25][]

![70 26][]![70 27][]

![70 28][]

![70 29][]

![70 30][]

# createComponent #

![70 31][]

![70 32][]

![70 33][]

# 构造⼦类构造函数 #

![70 34][]

![70 35][]

![70 36][]

# 安装组件钩⼦函数   ![70 37][] #

![70 38][]

![70 39][]

# 实例化    VNode #

![70 40][]

# patch #

![70 41][]

# createComponent #

![70 42][]

createComponent        函数中，⾸先对        vnode.data        做了⼀些判断：

![70 43][]

![70 44][]

![70 45][]

![70 46][]

![70 47][]

![70 48][]

![70 49][]

![70 50][]

![70 51][]

[70]: /images/20220514/121cfa70200b46d4aedd44a81ab9c87b.png
[70 1]: /images/20220514/630bec39c78c4ee3a5ce83a6ce303378.png
[70 2]: /images/20220514/d865e5e75663408e8f70af5901f5a301.png
[70 3]: /images/20220514/6d427dc4a2ea42b29c4fbd7b9a4e69ac.png
[70 4]: /images/20220514/02d6a974679c4171a92637ddf7c6e1c3.png
[70 5]: /images/20220514/8144f16bade244beb0cda654b7cbc11a.png
[70 6]: /images/20220514/a403bd4f2a734aa2afbe4f4872f13321.png
[70 7]: /images/20220514/6caebd78fc9b478da684fd6cb11915a5.png
[70 8]: /images/20220514/7e3cc07f662c4dde8c1c8a34546ca774.png
[70 9]: /images/20220514/b652fc2263b24cbaaa19bb455635d77a.png
[70 10]: /images/20220514/e6b4db76537e428eab42420877fe6d60.png
[70 11]: /images/20220514/8edbbf37736b4706bc94f3ac5bb41afa.png
[70 12]: /images/20220514/4a306152d4d948bc8bb9a9735ffb2a66.png
[70 13]: /images/20220514/f2f865635c9e4171afd4b8e7489ea79a.png
[70 14]: /images/20220514/538d25871c394f31b96d0bd95dae06ab.png
[70 15]: /images/20220514/3f05776e95734bf282e31179fb8fbd46.png
[70 16]: /images/20220514/d003e66a7e3d4468b77b37efdd8325c7.png
[70 17]: /images/20220514/cd433f3a0ec548b38e79b4123431ab1a.png
[70 18]: /images/20220514/941752ed1a2f4bb7b6dc15ca0cbd9732.png
[70 19]: /images/20220514/e722ccec79bb4a33994925d8e1c31ea3.png
[70 20]: /images/20220514/e00435dc88794403abeaaf9deff80512.png
[70 21]: /images/20220514/e3a6ae07c7eb48418589c5e4b269875a.png
[70 22]: /images/20220514/b10ca894bc00451590e6e43eef047992.png
[70 23]: /images/20220514/0e58505f12bf420ab89da51d37805197.png
[70 24]: /images/20220514/721a39d3d2094849b99fb81fbe5874d0.png
[70 25]: /images/20220514/e00e9474309c4519b0386bb661c4f25e.png
[70 26]: https://img-blog.csdn.net/20180902132453581?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 27]: /images/20220514/0d3b0ecf5f1d4197aae379b8057ea651.png
[70 28]: /images/20220514/1390e3ce2fbf4581867b05436259f5b1.png
[70 29]: /images/20220514/d6f0106ddbaf43c989f90f551035fca8.png
[70 30]: /images/20220514/53a6a4f17f014a3b9e3128389325ac59.png
[70 31]: /images/20220514/7fb0014bf5b043dd90d67866b08994af.png
[70 32]: /images/20220514/6bdbb1804e384537a8d6ec5e203f80e7.png
[70 33]: /images/20220514/add1abfe1693460b9990dbeaceaadbd7.png
[70 34]: /images/20220514/db9ffaae88ee4651857896fa6ba0f038.png
[70 35]: /images/20220514/3a631f1ae31742d8bc7b28b5bda13436.png
[70 36]: /images/20220514/5dbfa687025c4b9aa56bf10c11c46f49.png
[70 37]: /images/20220514/5e2e84c4c00a4e50aae6a2c3bf4bba84.png
[70 38]: /images/20220514/ce95319450d343b6982f99c72b97f78f.png
[70 39]: /images/20220514/85f1b886c0c14aa0b791450da8498e6a.png
[70 40]: /images/20220514/e744748ce71d483ebe144e8e3f2731da.png
[70 41]: /images/20220514/d45b11c9cfbe41eca664a14aadfe480e.png
[70 42]: /images/20220514/059f37af5a214943972593406c91ba62.png
[70 43]: /images/20220514/7ff6cdcd3a854f0bb89f9a13b409eae5.png
[70 44]: /images/20220514/adf42ab7bcff462b98371b9945e7331b.png
[70 45]: /images/20220514/89d87716bdbc47e0bc2d2bbc9b6ba3c5.png
[70 46]: /images/20220514/95e58d6488cc4580b3618040a3fd6d03.png
[70 47]: /images/20220514/c236c5fb54a54e7c87d60680194ec23c.png
[70 48]: /images/20220514/d527ef3500664d54a97bddf7c8841970.png
[70 49]: /images/20220514/1f3449fc89d94662b86c509df115bd43.png
[70 50]: /images/20220514/6d4694d389534215b5c8020e4356c83f.png
[70 51]: /images/20220514/e6f8d3f7e2b5420a8bd12bd338d8abef.png