Vue源码之 Vue的生命周期

时间:2022-09-26 17:32:38

天地初开就是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的生命周期的更多相关文章

  1. Vue源码之组件化/生命周期(个人向)

    大致流程 具体流程 组件化 (createComponent) 构造⼦类构造函数 const baseCtor = context.$options._base // plain options ob ...

  2. 一起学习vue源码 - Vue2.x的生命周期(初始化阶段)

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  3. 从vue源码看Vue.set()和this.$set()

    前言 最近死磕了一段时间vue源码,想想觉得还是要输出点东西,我们先来从Vue提供的Vue.set()和this.$set()这两个api看看它内部是怎么实现的. Vue.set()和this.$se ...

  4. Vue源码--解读vue响应式原理

    原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...

  5. React源码剖析系列 - 生命周期的管理艺术

    目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理.本系列文章希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期(C ...

  6. vue源码分析—Vue.js 源码构建

    Vue.js 源码是基于 Rollup 构建的,它的构建相关配置都在 scripts 目录下.(Rollup 中文网和英文网) 构建脚本 通常一个基于 NPM 托管的项目都会有一个 package.j ...

  7. vue源码分析—Vue.js 源码目录设计

    Vue.js 的源码都在 src 目录下,其目录结构如下 src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── ser ...

  8. React 源码剖析系列 - 生命周期的管理艺术

    目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理. 本系列文章 希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期 ...

  9. Spring5源码分析之Bean生命周期

    Spring Bean生命周期的构成 Bean的完整生命周期经历了各种方法调用,这些方法可以划分为以下几类: Bean自身的方法: 这个包括了Bean本身调用的方法和通过配置文件中<bean&g ...

  10. SuperSocket源码解析之会话生命周期

    一 基本概念 会话(Session)是客户端与服务器进行通信的基本单元,也是一个Socket的封装,在http协议中也有Session机制,其主要作用封装一个通信单元socket,负责服务器与客户端消 ...

随机推荐

  1. 从Unity3D编译器升级聊起Mono

    接前篇Unity 5.3.5p8 C#编译器升级,本文侧重了解一些Mono的知识. Unity3D的编译器升级 新升级的Mono C#编译器(对应Mono 4.4) Unity编辑器及播放器所使用的M ...

  2. Java api 入门教程 之 JAVA的SYSTEM类

    System类代表系统,系统级的很多属性和控制方法都放置在该类的内部.该类位于java.lang包. 由于该类的构造方法是private的,所以无法创建该类的对象,也就是无法实例化该类.其内部的成员变 ...

  3. java课后作业

    课后作业之字串加密: 设计思想: 1.输入要加密的英文子串str 2.定义num=str的字符串长度 3.将字符串转化为单个字符 4.每个字符+3,向后移3个 5.定义str1,将新得到的每个字符加到 ...

  4. 李洪强iOS面试题之-iOS选择题

    1.及时聊天app不会采用的网络传输方式是 DA UDP B TCP C Http D FTP 2.下列技术不属于多线程的是 AA Block B NSThread C NSOperation D G ...

  5. ssh&colon; connect to host localhost port 22&colon; Connection refused 问题

    错误原因:1.sshd 未安装2.sshd 未启动 3.防火墙 4需重新启动ssh 服务 解决方法:1.确定安装sshd: $ sudo apt-get install openssh-server ...

  6. Careercup - Facebook面试题 - 23594662

    2014-05-02 03:19 题目链接 原题: Given a sequence of numbers A() ..A(n), find the continuous subsequenceA(i ...

  7. ubuntu设置静态ip

    设置固定ip地址 >>>>>>>>>> ifconfig -a,  (注:p1p1为网卡名称) 配置静态ip vim /etc/networ ...

  8. numpy&period;random 常用函数详解之排列乱序篇&lpar;Permutations&rpar;

    1.numpy.random.shuffle(x) 参数:填入数组或列表. 返回值:无. 函数功能描述:对填入的数组或列表进行乱序处理,shape保持不变. 2.numpy.random.permut ...

  9. JVM的基本结构及其各部分详解(二)

    3.2 栈帧组成之操作数栈 操作数栈是栈帧的主要内容之一,它主要用于保存计算过程中的中间结果,同时作为计算过程中变量临时的存储空间. 操作数栈也是一个先进后出的数据结构,只支持入栈和出栈两种操作,许多 ...

  10. IDEA修改git账号及密码的方法 ----绝壁好使

    就这个这个位置,之前的账号信息就保存在这里,直接编辑修改,修改成你现在的账号, idea提交的时候就能直接提交,或者提交的时候要输入账号密码,ok,我的微信 18550918581,不懂再找我