Vue 中我们是通过 $mount 实例方法去挂载 vm 的

$mount 方法实际上会去调用 mountComponent 方法,mountComponent 核心就是先实例化一个渲染Watcher,在它的回调函数中会调用 updateComponent 方法,在此方法中调用 vm._render 方法先生成虚拟 Node,最终调用 vm._update更新 DOM。

先实例化一个渲染Watcher,在它的回调函数中会调用 updateComponent 方法

new Watcher(vm, updateComponent, noop, {
before () {
if (vm._isMounted) {
callHook(vm, 'beforeUpdate')
}
}
}, true /* isRenderWatcher */)
new Watcher  实例化渲染 Watcher
 callHook(vm, 'beforeUpdate')   回调 updateComponent 方法

updateComponent 方法:
 updateComponent = () => {
vm._update(vm._render(), hydrating)
}
updateComponent 方法 里面先调用  render  方法

 
 

Vue.js 技术揭秘学习 (2) Vue 实例挂载的实现的更多相关文章

  1. Vue.js 技术揭秘学习 (3) render

    Vue 的 _render 方法是实例的一个私有方法,它用来把实例渲染成一个虚拟 Node  ,返回的是一个VNode 在 Vue 的官方文档中介绍了 render 函数的第一个参数是 createE ...

  2. Vue.js 技术揭秘学习 (1) new Vue 发生了什么

    Vue 初始化主要就干了几件事情,合并配置,初始化生命周期,初始化事件中心,初始化渲染,初始化 data.props.computed.watcher 等等.

  3. Vue.js 技术揭秘(学习) vue流程

    new Vue() _init() mergeOptions $watch --> new Watch vm._render 生成VNode create diff patch vm._upda ...

  4. Vue.js 技术揭秘(学习) slot

    slot特性分发父组件的内容 作用域插槽:通过子组件的一些数据来决定父组件实现插槽

  5. Vue.js 技术揭秘(学习) 深入响应式原理 nextTick外传

    microTask  mutationObserve. promise.then macroTask setImmediate. messageChannnel.setTimeout.postMess ...

  6. 详解Vue.js 技术

    本文主要从8个章节详解vue技术揭秘,小编觉得挺有用的,分享给大家. 为了把 Vue.js 的源码讲明白,课程设计成由浅入深,分为核心.编译.扩展.生态四个方面去讲,并拆成了八个章节,如下: 准备工作 ...

  7. Vue.js 1.x 和 2.x 实例的生命周期

    在Vue.js中,在实例化Vue之前,它们都是以HTML的文本形式存在文本编辑器中.当实例化后将经历创建.编译.销毁三个主要阶段. 以下是Vue.js 1.x  实例的生命周期图示: Vue.js 1 ...

  8. Vue.js 2.0 学习重点记录

      Vue.js兼容性 Vue.js.js 不支持 IE8 及其以下版本,因为 Vue.js.js 使用了 IE8 不能模拟的 ECMAScript 5 特性. Vue.js.js 支持所有兼容 EC ...

  9. Vue.js高效前端开发 • 【Vue组件】

    全部章节 >>>> 文章目录 一.Vue组件介绍 1.组件概述 2.组件使用步骤 3.实践练习 一.Vue组件使用 1.组件注册 2.组件注册语法糖 3.使用script或te ...

随机推荐

  1. Python 高效编程技巧实战(2-1)如何在列表,字典, 集合中根据条件筛选数据

    Python 高效编程技巧实战(2-1)如何在列表,字典, 集合中根据条件筛选数据 学习目标 1.学会使用 filter 借助 Lambda 表达式过滤列表.集合.元组中的元素: 2.学会使用列表解析 ...

  2. ionic使用自定义icon

    参考文档:https://www.jianshu.com/p/5346fee9fd80  angular+ionic 自定义图标 注意: 这里不用name 用class类名显示出来 最后出来图标是个小 ...

  3. maven入门问题解决

    记录入门使用maven的问题和解决方法: 一.用mvn clean compile编译报错/ 或者在IDE中编译时,Problem视图显示错误:无法从maven服务器或者私有服务器或者某个网站中中下载 ...

  4. Spring整合Hibernate实现Spring Data JPA (介绍和使用)

    Spring Data JPA是Spring基于Hibernate开发的一个JPA框架.如果用过Hibernate或者MyBatis的话,就会知道对象关系映射(ORM)框架有多么方便. 但是Sprin ...

  5. 快速获取批量处理Docker镜像SQL语句

    .获取批量pull语句 select concat('docker pull develop-harbor.geostar.com.cn/', t.name, ':', t1.tag) name fr ...

  6. skip a transaction in goldengate

    skip a transaction in goldengate [oracle@db ]$ ggsci Oracle GoldenGate Command Interpreter for Oracl ...

  7. 35 怎么优化join

    35 怎么优化join 上一篇介绍了join的两种算法:nlj和bnl create table t1(id int primary key, a int, b int, index(a)); cre ...

  8. Visual Studio关于项目迁移或拉取代码产生的dll黄色感叹号警告问题解决方案

    今天换了台大电脑,准备好好爽一下, 就把笔记本上的项目拷贝到了台式机上, 但是我没有拷贝解决方案整个文件夹,因为其中项目太多了,我就把其中一个项目的文件夹直接拷贝到电脑上,然后就出现了下面的情况. 这 ...

  9. 基于nginx实现二维码下载安装apk文件

    将apk文件置于nginx目录下 <!--进入nginx安装路径--> /usr/local/nginx <!--新建放apk的目录--> mkdir -p resources ...

  10. 阅读jdk源码的流程(从今天开始要阅读jdk源码)

    1.java.lang 2.java.util 3.java.util.concurrent 4.java.util.concurrent.atomic 5.java.lang.reflect 6.j ...