天地初开就是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()的话是有的,后面的组件没有?),进入$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等等。
Vue源码之 Vue的生命周期的更多相关文章
-
Vue源码之组件化/生命周期(个人向)
大致流程 具体流程 组件化 (createComponent) 构造⼦类构造函数 const baseCtor = context.$options._base // plain options ob ...
-
一起学习vue源码 - Vue2.x的生命周期(初始化阶段)
作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...
-
从vue源码看Vue.set()和this.$set()
前言 最近死磕了一段时间vue源码,想想觉得还是要输出点东西,我们先来从Vue提供的Vue.set()和this.$set()这两个api看看它内部是怎么实现的. Vue.set()和this.$se ...
-
Vue源码--解读vue响应式原理
原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...
-
React源码剖析系列 - 生命周期的管理艺术
目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理.本系列文章希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期(C ...
-
vue源码分析—Vue.js 源码构建
Vue.js 源码是基于 Rollup 构建的,它的构建相关配置都在 scripts 目录下.(Rollup 中文网和英文网) 构建脚本 通常一个基于 NPM 托管的项目都会有一个 package.j ...
-
vue源码分析—Vue.js 源码目录设计
Vue.js 的源码都在 src 目录下,其目录结构如下 src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── ser ...
-
React 源码剖析系列 - 生命周期的管理艺术
目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理. 本系列文章 希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期 ...
-
Spring5源码分析之Bean生命周期
Spring Bean生命周期的构成 Bean的完整生命周期经历了各种方法调用,这些方法可以划分为以下几类: Bean自身的方法: 这个包括了Bean本身调用的方法和通过配置文件中<bean&g ...
-
SuperSocket源码解析之会话生命周期
一 基本概念 会话(Session)是客户端与服务器进行通信的基本单元,也是一个Socket的封装,在http协议中也有Session机制,其主要作用封装一个通信单元socket,负责服务器与客户端消 ...
随机推荐
-
从Unity3D编译器升级聊起Mono
接前篇Unity 5.3.5p8 C#编译器升级,本文侧重了解一些Mono的知识. Unity3D的编译器升级 新升级的Mono C#编译器(对应Mono 4.4) Unity编辑器及播放器所使用的M ...
-
Java api 入门教程 之 JAVA的SYSTEM类
System类代表系统,系统级的很多属性和控制方法都放置在该类的内部.该类位于java.lang包. 由于该类的构造方法是private的,所以无法创建该类的对象,也就是无法实例化该类.其内部的成员变 ...
-
java课后作业
课后作业之字串加密: 设计思想: 1.输入要加密的英文子串str 2.定义num=str的字符串长度 3.将字符串转化为单个字符 4.每个字符+3,向后移3个 5.定义str1,将新得到的每个字符加到 ...
-
李洪强iOS面试题之-iOS选择题
1.及时聊天app不会采用的网络传输方式是 DA UDP B TCP C Http D FTP 2.下列技术不属于多线程的是 AA Block B NSThread C NSOperation D G ...
-
ssh: connect to host localhost port 22: Connection refused 问题
错误原因:1.sshd 未安装2.sshd 未启动 3.防火墙 4需重新启动ssh 服务 解决方法:1.确定安装sshd: $ sudo apt-get install openssh-server ...
-
Careercup - Facebook面试题 - 23594662
2014-05-02 03:19 题目链接 原题: Given a sequence of numbers A() ..A(n), find the continuous subsequenceA(i ...
-
ubuntu设置静态ip
设置固定ip地址 >>>>>>>>>> ifconfig -a, (注:p1p1为网卡名称) 配置静态ip vim /etc/networ ...
-
numpy.random 常用函数详解之排列乱序篇(Permutations)
1.numpy.random.shuffle(x) 参数:填入数组或列表. 返回值:无. 函数功能描述:对填入的数组或列表进行乱序处理,shape保持不变. 2.numpy.random.permut ...
-
JVM的基本结构及其各部分详解(二)
3.2 栈帧组成之操作数栈 操作数栈是栈帧的主要内容之一,它主要用于保存计算过程中的中间结果,同时作为计算过程中变量临时的存储空间. 操作数栈也是一个先进后出的数据结构,只支持入栈和出栈两种操作,许多 ...
-
IDEA修改git账号及密码的方法 ----绝壁好使
就这个这个位置,之前的账号信息就保存在这里,直接编辑修改,修改成你现在的账号, idea提交的时候就能直接提交,或者提交的时候要输入账号密码,ok,我的微信 18550918581,不懂再找我