vue源码分析之new Vue过程
实例化构造函数
从这里可以看出new Vue实际上是使vue构造函数实例化,然后调用_init方法
_init方法,该方法在 src/core/instance/init.js 中定义
Vue.prototype._init = function (options?: Object) {
const vm: Component = this
// a uid
vm._uid = uid++
let startTag, endTag
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
startTag = `vue-perf-start:${vm._uid}`
endTag = `vue-perf-end:${vm._uid}`
mark(startTag)
}
// a flag to avoid this being observed
vm._isVue = true
// merge options
if (options && options._isComponent) {
// optimize internal component instantiation
// since dynamic options merging is pretty slow, and none of the
// internal component options needs special treatment.
initInternalComponent(vm, options)
} else {
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
}
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
initProxy(vm)
} else {
vm._renderProxy = vm
}
// expose real self
vm._self = vm
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
vm._name = formatComponentName(vm, false)
mark(endTag)
measure(`vue ${vm._name} init`, startTag, endTag)
}
if (vm.$options.el) {
vm.$mount(vm.$options.el)
}
}
Vue 初始化主要就干了几件事情,传入option,合并option配置,初始化生命周期,初始化事件中心,初始化渲染,初始化 data、props、computed、watcher 等等
vue源码分析之new Vue过程的更多相关文章
- Vue源码分析(一) : new Vue() 做了什么
Vue源码分析(一) : new Vue() 做了什么 author: @TiffanysBear 在了解new Vue做了什么之前,我们先对Vue源码做一些基础的了解,如果你已经对基础的源码目录设计 ...
- vue 快速入门 系列 —— 侦测数据的变化 - [vue 源码分析]
其他章节请看: vue 快速入门 系列 侦测数据的变化 - [vue 源码分析] 本文将 vue 中与数据侦测相关的源码摘了出来,配合上文(侦测数据的变化 - [基本实现]) 一起来分析一下 vue ...
- Vue源码分析(二) : Vue实例挂载
Vue源码分析(二) : Vue实例挂载 author: @TiffanysBear 实例挂载主要是 $mount 方法的实现,在 src/platforms/web/entry-runtime-wi ...
- 前端Vue 源码分析-逻辑层
Vue 源码分析-逻辑层 预期的效果: 监听input的输入,input在输入的时候,会触发 watch与computed函数,并且会更新原始的input的数值.所以直接跟input相关的处理就有3处 ...
- [Vue源码分析] v-model实现原理
最近小组有个关于vue源码分析的分享会,提前准备一下… 前言:我们都知道使用v-model可以实现数据的双向绑定,及实现数据的变化驱动dom的更新,dom的更新影响数据的变化.那么v-model是怎么 ...
- MyBatis 源码分析 - 映射文件解析过程
1.简介 在上一篇文章中,我详细分析了 MyBatis 配置文件的解析过程.由于上一篇文章的篇幅比较大,加之映射文件解析过程也比较复杂的原因.所以我将映射文件解析过程的分析内容从上一篇文章中抽取出来, ...
- Spring源码分析之`BeanFactoryPostProcessor`调用过程
前文传送门: Spring源码分析之预启动流程 Spring源码分析之BeanFactory体系结构 本文内容: AbstractApplicationContext#refresh前部分的一点小内容 ...
- Spring Ioc源码分析系列--Bean实例化过程(一)
Spring Ioc源码分析系列--Bean实例化过程(一) 前言 上一篇文章Spring Ioc源码分析系列--Ioc容器注册BeanPostProcessor后置处理器以及事件消息处理已经完成了对 ...
- Spring Ioc源码分析系列--Bean实例化过程(二)
Spring Ioc源码分析系列--Bean实例化过程(二) 前言 上篇文章Spring Ioc源码分析系列--Bean实例化过程(一)简单分析了getBean()方法,还记得分析了什么吗?不记得了才 ...
随机推荐
- 移动端头部固定,上划逐渐透明 (vue)
移动端头部固定,上划逐渐透明 <template> <div> <router-link tag="div" to="/" cla ...
- Linux(Ubuntu)使用日记------自定义命令的使用
Linux如何自定义自己的命令呢?修改 系统中的 ~/.bashrc 文件即可 在这个文件最后面使用alias命令重定义命令. 例如: # novel-git begin alias n.r='les ...
- error:Microsoft Visual C++ 14.0 is required.
1,下载14.0安装包,解压,再次执行pip install XX命令 2,安装包已经在下载文件中 3,最不行找这个网站 https://www.microsoft.com/zh-cn/downloa ...
- vue2.0用组件实现选项卡
HTML JavaScript 使用 $emit(eventName) 触发事件,在组件内部绑定点击事件,每个独立组件之间发生点击事件触发外层函数,实现选项卡功能
- 虚拟机iso整理
供个人备用,随缘补充 ubuntu-16.04.6-desktop-amd64.iso 资源: https://pan.baidu.com/s/1ZR_5jgzNsGeOrkE6hAqxEA 提取码: ...
- #!/usr/bin/python3的作用 解决vscode ImportError: No module named xxxx
在 Python 脚本的第一行经常见到这样的注释: #!/usr/bin/env python3 或者 #!/usr/bin/python3 含义 在脚本中, 第一行以 #! 开头的代码, 在计算机行 ...
- <数据结构基础学习>(三)Part 1 栈
一.栈 Stack 栈也是一种线性的数据结构 相比数组,栈相对应的操作是数组的子集. 只能从一端添加元素,也只能从一端取出元素.这一端成为栈顶. 1,2,3依次入栈得到的顺序为 3,2,1,栈顶为3, ...
- php支持大文件上传
打开php.ini找到 upload_max_filesize . memory_limit . post_max_size 这三个参数! upload_max_filesize = 2G 是上传最大 ...
- Math & Number Theory
数学 数论: 莫比乌斯反演 矩阵游戏 小学数学,欧拉定理 组合: 线性代数: 高斯消元 其他: 一些题目
- 解决Navicat远程连接MySQL出现 10060 unknow error
前言:今天想远程连接一下自己服务器上的MySQL,用的用的软件是Navicat,服务器上的MySQL版本为5.7 第一次连接的时候就出意外了 大概意思是 无法连接MySQL服务,解决步骤如下 第一:首 ...