Vue源码之 Vue的生命周期

天地初开就是new Vue(options)，里面就一句话 this._init(options); （Vue.prototype.init 的赋值在initMixin(Vue)方法里）

_init方法里：

initInternalComponent 和mergeOptions方法是合并option这个另说。

initEvents是处理父组件（如果有）传递来的on事件

initRender很重要，主要是这一句 vm._c = function (a, b, c, d) { return createElement(vm, a, b, c, d, false); }; 在vm实例上挂载一个_c方法，用处下面会讲到

initState很重要，处理我们在一个组件里定义的参数，比如props，computed，watch，data等。刚开始是initProps，就是把父组件（如果有）传递进来的值从propsData中取出来，绑定给自己的对应的props里的属性，reactive之后再挂在vm上（至于为什么父组件的属性能从自己的vm.$options.propsData中获取出来，这个下面会讲）。initMethods略，initData也简单，就是递归reactive，initComputed和initWatch别的文章另说。

再往下，if (vm.$options.el) {vm.$mount(vm.$options.el);}

这一段最重要，如果vue的参数里有el属性（el是准备挂载的节点，第一次的new Vue()的话是有的，后面的Vue组件没有，而是），进入$mount方法，点进去看只有一句return mountComponent(this, el, hydrating)，但是这个方法后面被重写了，添加了一部分逻辑，添加的逻辑的作用是根据template（如果没有，根据el生成），生成render函数（里面调用上面_c），返回值是一个虚拟节点Vnode，

最后是mountComponent，新建一个render Watcher，expOrFn方法是vm._update(vm._render(), hydrating)（因为这个Watcher的lazy是false，所以会立即执行get方法，把自己推进栈顶，让被vm_render()引用到的属性收集依赖），

而接下来执行update方法，调用的是patch方法，把render生成的vnode和旧的对比，操作真实node，这个另说。

上面说的是创建周期

创建之后，就到了update更新周期，set方法导致vm._update这个方法被调用，把render生成的vnode和旧的对比，操作真实node等等。

转载于:https://www.cnblogs.com/chuliang/p/10744716.html

Vue源码之 Vue的生命周期相关推荐

Spring5源码 - 07 Spring Bean 生命周期流程源码解读02
文章目录 Pre 通俗流程 finishBeanFactoryInitialization Pre Spring5源码 - 06 Spring Bean 生命周期流程概述 01 接上文通俗流程下 ...
Vue源码分析--Vue.component
Vue源码分析–Vue.component 我将非 Vue.component 的部分去掉了 export function initAssetRegisters (Vue: GlobalAPI) { ...
【vn.py学习笔记（六）】vn.py constant源码阅读、委托生命周期
[vn.py学习笔记(六)]vn.py constant源码阅读.委托生命周期写在前面 1 constant 1.1 Direction 1.2 Offset 1.3 Status 1.4 Prod ...
跟着小马哥学系列之 Spring IoC（源码篇：Bean 生命周期）
跟着小马哥学系列之 Spring IoC(源码篇:Bean 生命周期) 简介 Bean 元信息来源 Bean 元信息解析成 BeanDefinition 并注册 BeanDefinition 转变成 ...
vue源码学习--vue源码学习入门
本文为开始学习vue源码的思路整理.在拿到vue项目源码的之后看到那些项目中的文件夹,会很困惑,不知道每个文件夹内的世界,怎么变换,怎样的魔力,最后产生了vue框架.学习源码也无从学起.我解决了这些困 ...
Vue源码--解读vue响应式原理
原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...
Spring5源码 - 06 Spring Bean 生命周期流程概述 01
文章目录 Bean生命周期概述 Demo finishBeanFactoryInitialization(beanFactory) 核心流程 Bean生命周期概述说到Spring Bean的生命周期 ...
Spring源码分析——Bean的生命周期
文章目录说明测试代码说明本文从源码的角度分析Spring中Bean的加载过程,本文使用的Spring版本为4.3.25.RELEASE 测试代码测试代码如下,根据这段简单的测试代码,一步步跟 ...
Spring源码分析-深入理解生命周期之BeanFactoryProcessor
生命周期之BeanFactoryPostProcessor 先来看看bean的生命周期.对于熟悉spring 的朋友来说,bean的生命周期并不陌生.它可以在bean加载,bean初始化的过程中加入我 ...
zuul源码分析之Request生命周期管理
为什么80%的码农都做不了架构师?>>> zuul核心框架 zuul是可以认为是一种API-Gateway.zuul的核心是一系列的filters, 其作用可以类比Servle ...

Vue源码之 Vue的生命周期

Vue源码之 Vue的生命周期相关推荐

最新文章

热门文章