new Vue 发生了什么

new vue 我们从入口分析,我们new 一个实例化对象,是由Funcction实现的,来看一下源码,在src/core/instance/index.js 中。

import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'

function Vue (options) {
if (process.env.NODE_ENV !== 'production' &&
!(this instanceof Vue)
) {
warn('Vue is a constructor and should be called with the `new` keyword')
}
this._init(options)
}

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

由此可以看出 Function 里面 this._init(options), 通过原型的调用 在这里调用
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)
}
}

从中可以看下,初始化生命周期、初始化事件,初始化data/props/render/watch/computed等

从中可以看出 beforeCreate 在 初始化data前就开始的生命周期,创建data之后 created生命周期

new Vue 发生了什么的更多相关文章

  1. new Vue发生了什么(五)

    从入口代码开始分析,我们先来分析 new Vue 背后发生了哪些事情.我们都知道,new 关键字在 Javascript 语言中代表实例化是一个对象,而 Vue 实际上是一个类,类在 Javascri ...

  2. 实例化vue发生了什么(详解vue生命周期)

    const app = new Vue({ el:"#app', data:{ message:'hello,lifePeriod' }, methods:{ init(){ console ...

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

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

  4. vue学习笔记——篇3

    1.绑定计算后数据,三种方式: >1.红色框,通过method >2.黄色框,通过computed >3.蓝色框,通过watch 推荐computed,vue对computed做了缓 ...

  5. 详解Vue.js 技术

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

  6. vue.js实现初了解(一)

    1. vue 2.0是用Flow做静态类型检查, 3.0对TypeScript的支持更好了: 2. vue.js是基于Rollup(更轻量,适合js库的构建)构建的,它的构建相关配置都在scripts ...

  7. vue教程(四)--其他实用用法补充

    一.vue生命周期简单介绍 var App={ template:'', data(){ }, beforeCreated:function(){ //不能操作数据,只是初始化了事件等.. }, cr ...

  8. Vue 源码学习(1)

    概述 我在闲暇时间学习了一下 Vue 的源码,有一些心得,现在把它们分享给大家. 这个分享只是 Vue源码系列 的第一篇,主要讲述了如下内容: 寻找入口文件 在打包的过程中 Vue 发生了什么变化 在 ...

  9. vue2.x源码理解

    也不知道哪股风潮,钻研源码竟成了深入理解的标配.我只想说一句,说的很对 准备工作 从GitHub上面下载vue的源码(https://github.com/vuejs/vue) 了解下Flow,Flo ...

随机推荐

  1. Glide高级详解—缓存与解码复用

    Glide 使用简明的流式语法API,大多数情况下,可能完成图片的设置你只需要:Glide.with(activity) .load(url) .into(imageView); 默认情况下,Glid ...

  2. Confluence 6 如何备份和恢复

    如何备份 有关备份你数据库使用的命令与你使用的具体数据库有关,例如针对 PostgreSQL 数据库,备份命令为 pg_dump dbname > outfile. 你应该针对你使用的数据库不同 ...

  3. linux 下创建共享文件夹

    首先需要在win下共享一个盘 然后设置virtulbox 然后修改一串代码 参考原文 https://jingyan.baidu.com/article/2fb0ba40541a5900f2ec5f0 ...

  4. poj3070 单位矩阵(转移矩阵构造)+矩阵快速幂

    太妙了..通过矩阵乘法来加速递推 #include<iostream> #include<cstring> #include<cstdio> using names ...

  5. js变量前的+是什么意思

    js变量前的+是什么意思   if (+value >= distance) {} 这个+什么意思 可以理解为 Number(value) 会将其按照Number函数的规则转换为数值或者NaN, ...

  6. JS实现继承的几种方式(转)

    转自:幻天芒的博客 前言 JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一.那么如何在JS中实现继承呢?让我们拭目以待. JS继承的实现方式 既然要实现继承,那么首先我们得有一个父类,代码如 ...

  7. delete web server(nginx)

    #!/bin/bash conf_dir1="/usr/local/nginx/conf/vhost.d" #conf_dir2="/usr/local/apache2/ ...

  8. Spring Cloud Eureka简介及原理

    Eureka是Netflix开发的服务发现组件,本身是一个基于REST的服务.Spring Cloud将它集成在其子项目spring-cloud-netflix中,以实现Spring Cloud的服务 ...

  9. 专注笔试算法20年(C语言版)

    1.C语言实现链表数据的反转({1,2,3,4}->{4,3,2,1}). int trav(PNode *head){ PNode p_1,p_2,tmp; //判断参数是否有效 if(*he ...

  10. Lua中,泛型for循环遍历table时,ipairs和pairs的区别

    为了看出两者的区别,首先定义一个table: a={"Hello","World";a=1,b=2,z=3,x=10,y=20;"Good" ...