大家好我是小蚪，vue执行顺序，关于vue执行命令很多人还不知道，那么现在让我们一起来看看吧！

vue执行顺序 vue执行命令

1、第二 学习前端有前途吗？ 关于这个问题， 我的答案是：有前途，非常有前途，值得来学习。

2、但是行业有前途，不代表你就有前途，因为前途是给有实力的人准备的，如果你不好好学习前端技术，只有三脚猫的功夫，那么前途和你只能擦肩而过，当然现在不会不要紧，可以加强学习，积累实力，任何一门技术的提升，都有一个过程。

3、再有一棵树形结构的 JaScript 对象后，我们现在需要做的就是将这棵树跟真实的 Dom 树形成映射关系，首先简单回顾之前遇到的 mountComponent 方法：我们已经执行完了 vm._render 方法拿到了 VNode ，现在将它作为参数传给 vm._update 方法并执行。

4、 vm._update 这个方法的作用就是就是将 VNode 转为真实的 Dom ，不过它有两个执行的时机：我们现在先来看下 vm._update 方法的定义：这里的 vm.$el 是之前在 mountComponent 方法内就挂载的，一个真实 Dom 元素。

5、首次渲染会传入 vm.$el 以及得到的 VNode ，所以看下 vm.__patch__ 定义：__patch__ 是 createPatchFunction 方法内部返回的一个方法，它接受一个对象：nodeOps 属性：封装了作原生 Dom 的一些方法的，如创建、插入、移除这些，再使用到的地方再详解。

6、modules 属性：创建真实 Dom 也需要生成它的如 class / attrs / style 等属性。

7、 modules 是一个数组，数组的每一项都是这些属性对应的钩子方法，这些属性的创建、更新、销毁等都有对应钩子方法，当某一时刻需要做某件事，执行对应的钩子即可。

8、比如它们都有 create 这个钩子方法，如将这些 create 钩子收集到一个数组内，需要在真实 Dom 上创建这些属性时，依次执行数组的每一项，也就是依次创建了它们。

9、这里大家记住一句话即可，无论 VNode 是什么类型的节点，只有三种类型的节点会被创建并插入到的 Dom 中：元素节点、注释节点、和文本节点。

10、我们接着来看下 createPatchFunction 它究竟返回一个什么样的方法：首次渲染时没有 oldVnode ， oldVnode 就是 $el ，一个真实的 dom ，经过 emptyNodeAt(oldVnode) 方法包装：再将传入的 $el 属性转为了 VNode 格式之后，我们继续：createElm 方法开始生成真实的 Dom ， VNode 生成真实的 Dom 的方式还是分为元素节点和组件两种方式，所以我们使用上一章生成的 VNode 分别说明。

11、大家可以先看下这个流程图有一个印象即可，接下来再看具体实现时相信思路会清晰很多：开始创建 Dom ，我们来看下它的定义：依次判断是否是元素节点、注释节点、文本节点，分别创建它们然后插入到父节点里面，这里主要介绍创建元素节点，另外两个并没有复杂的逻辑。

12、我们来看下 createChild 方法定义：开始创建子节点，遍历 VNode 的每一项，每一项还是使用之前的 createElm 方法创建 Dom 。

13、如果某一项又是数组，继续调用 createChild 创建某一项的子节点；如果某一项不是数组，创建文本节点并将它添加到父节点内。

14、像这样使用递归的形式将嵌套的 VNode 全部创建为真实的 Dom 。

15、再看一遍流程图，相信大家疑惑已经减少很多：执行 createComponent 方法，如果是元素节点不会返回任何东西，所以是 undefined ，会继续走接下来的创建元素节点的逻辑。

16、现在是组件，我们看下 createComponent 的实现：首先会将组件的 vnode.data 赋值给 i ，是否有这个属性就能判断是否是组件 vnode 。

17、之后的 if(isDef(i = i.hook) && isDef(i = i.init)) 集判断和赋值为一体， if 内的 i(vnode) 就是执行的组件 init(vnode) 方法。

18、这个时候我们来看下组件的 init 钩子方法做了什么：activeInstance 是一个全局的变量，再 update 方法内赋值为当前实例，再当前实例做 __patch__ 的过程中作为子组件的父实例传入，在子组件的 initLifecycle 时构建组件关系。

19、将 createComponentInstanceForVnode 执行的结果赋值给了 ，所以看下它的返回的结果是什么：再组件的 init 方法内首先执行 createComponentInstanceForVnode 方法，这个方法的内部就会将子组件的构造函数实例化，因为子组件的构造函数继承了基类 Vue 的所有能力，这个时候相当于执行 new Vue({...}) ，接下来又会执行 _init 方法进行一系列的子组件的初始化逻辑，我们回到 _init 方法内，因为它们之间还是有些不同的地方：前面都还执行的好好的，却因为没有 el 属性，所以没有挂载， createComponentInstanceForVnode 方法执行完毕。

20、这个时候我们回到组件的 init 方法，补全剩下的逻辑：我们在 init 方法内手动挂载这个组件，接着又会执行组件的 _render() 方法得到组件内元素节点 VNode ，然后执行 vm._update() ，执行组件的 __patch__ 方法，因为 $mount 方法传入的是 undefined ， oldVnode 也是 undefined ，会执行 __patch__ 内的这段逻辑：这次执行 createElm 时没有传入第三个参数父节点的，那组件创建好的 Dom 放哪生效了？没有父节点也要生成 Dom 不是，这个时候执行的是组件的 __patch__ ，所以参数 vnode 就是组件内元素节点的 vnode 了：很明显这个时候不是组件了，即使是组件也没关系，大不了还是执行一遍 createComponent 创建组件的逻辑，因为总会有组件是由元素节点组成的。

21、这个时候我们执行一遍创建元素节点的逻辑，因for (index = 0; index 无论是嵌套多么深的组件，遇到组件的后就执行 init ，在 init 的 __patch__ 过程中又遇到嵌套组件，那就再执行嵌套组件的 init ，嵌套组件完成 __patch__ 后将真实的 Dom 插入到它的父节点内，接着执行完外层组件的 __patch__ 又插入到它的父节点内，插入到 body 内，完成嵌套组件的创建过程，总之还是一个由里及外的过程。

22、再回过头来看这张图，相信会好理解很多~接下来会将 updateComponent 传入到一个 Watcher 的类中，这个类是干嘛的，我们下一章再说明，接下来执行 mounted 钩子方法。

本文到这结束，希望上面文章对大家有所帮助。