Vue.js 技术揭秘学习 (2) Vue 实例挂载的实现
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 实例挂载的实现的更多相关文章
- Vue.js 技术揭秘学习 (3) render
Vue 的 _render 方法是实例的一个私有方法,它用来把实例渲染成一个虚拟 Node ,返回的是一个VNode 在 Vue 的官方文档中介绍了 render 函数的第一个参数是 createE ...
- Vue.js 技术揭秘学习 (1) new Vue 发生了什么
Vue 初始化主要就干了几件事情,合并配置,初始化生命周期,初始化事件中心,初始化渲染,初始化 data.props.computed.watcher 等等.
- Vue.js 技术揭秘(学习) vue流程
new Vue() _init() mergeOptions $watch --> new Watch vm._render 生成VNode create diff patch vm._upda ...
- Vue.js 技术揭秘(学习) slot
slot特性分发父组件的内容 作用域插槽:通过子组件的一些数据来决定父组件实现插槽
- Vue.js 技术揭秘(学习) 深入响应式原理 nextTick外传
microTask mutationObserve. promise.then macroTask setImmediate. messageChannnel.setTimeout.postMess ...
- 详解Vue.js 技术
本文主要从8个章节详解vue技术揭秘,小编觉得挺有用的,分享给大家. 为了把 Vue.js 的源码讲明白,课程设计成由浅入深,分为核心.编译.扩展.生态四个方面去讲,并拆成了八个章节,如下: 准备工作 ...
- Vue.js 1.x 和 2.x 实例的生命周期
在Vue.js中,在实例化Vue之前,它们都是以HTML的文本形式存在文本编辑器中.当实例化后将经历创建.编译.销毁三个主要阶段. 以下是Vue.js 1.x 实例的生命周期图示: Vue.js 1 ...
- Vue.js 2.0 学习重点记录
Vue.js兼容性 Vue.js.js 不支持 IE8 及其以下版本,因为 Vue.js.js 使用了 IE8 不能模拟的 ECMAScript 5 特性. Vue.js.js 支持所有兼容 EC ...
- Vue.js高效前端开发 • 【Vue组件】
全部章节 >>>> 文章目录 一.Vue组件介绍 1.组件概述 2.组件使用步骤 3.实践练习 一.Vue组件使用 1.组件注册 2.组件注册语法糖 3.使用script或te ...
随机推荐
- Python 高效编程技巧实战(2-1)如何在列表,字典, 集合中根据条件筛选数据
Python 高效编程技巧实战(2-1)如何在列表,字典, 集合中根据条件筛选数据 学习目标 1.学会使用 filter 借助 Lambda 表达式过滤列表.集合.元组中的元素: 2.学会使用列表解析 ...
- ionic使用自定义icon
参考文档:https://www.jianshu.com/p/5346fee9fd80 angular+ionic 自定义图标 注意: 这里不用name 用class类名显示出来 最后出来图标是个小 ...
- maven入门问题解决
记录入门使用maven的问题和解决方法: 一.用mvn clean compile编译报错/ 或者在IDE中编译时,Problem视图显示错误:无法从maven服务器或者私有服务器或者某个网站中中下载 ...
- Spring整合Hibernate实现Spring Data JPA (介绍和使用)
Spring Data JPA是Spring基于Hibernate开发的一个JPA框架.如果用过Hibernate或者MyBatis的话,就会知道对象关系映射(ORM)框架有多么方便. 但是Sprin ...
- 快速获取批量处理Docker镜像SQL语句
.获取批量pull语句 select concat('docker pull develop-harbor.geostar.com.cn/', t.name, ':', t1.tag) name fr ...
- skip a transaction in goldengate
skip a transaction in goldengate [oracle@db ]$ ggsci Oracle GoldenGate Command Interpreter for Oracl ...
- 35 怎么优化join
35 怎么优化join 上一篇介绍了join的两种算法:nlj和bnl create table t1(id int primary key, a int, b int, index(a)); cre ...
- Visual Studio关于项目迁移或拉取代码产生的dll黄色感叹号警告问题解决方案
今天换了台大电脑,准备好好爽一下, 就把笔记本上的项目拷贝到了台式机上, 但是我没有拷贝解决方案整个文件夹,因为其中项目太多了,我就把其中一个项目的文件夹直接拷贝到电脑上,然后就出现了下面的情况. 这 ...
- 基于nginx实现二维码下载安装apk文件
将apk文件置于nginx目录下 <!--进入nginx安装路径--> /usr/local/nginx <!--新建放apk的目录--> mkdir -p resources ...
- 阅读jdk源码的流程(从今天开始要阅读jdk源码)
1.java.lang 2.java.util 3.java.util.concurrent 4.java.util.concurrent.atomic 5.java.lang.reflect 6.j ...