vue生命周期beforeCreate()前做了什么

概念

当我们执行 new Vue()开始到被创建完成，vue需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

beforeCreate

问题：beforeCreate为vue初始化过程中第一个钩子函数，那么从new Vue()到beforeCreate过程它做了什么？

从图中我们可以到，这个过程中，进行了初始化事件、生命周期。
我们从vue2源码上看看
1、vue-dev\src\core\instance\index.js

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)
}//初始化mixin
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)export default Vue

我们找到vue入口文件，可以发现vue函数中执行了_init(options)初始化方法，但是这个方法并没有在当前文件定义。函数的外面执行了initMixin(Vue)，我们可以得出，这是一个初始化的mixin。

2.\vue-dev\src\core\instance\init.js

export function initMixin (Vue: Class<Component>) {Vue.prototype._init = function (options?: Object) {const vm: Component = this// a flag to avoid this being observedvm._isVue = true// merge optionsif (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)}// expose real selfvm._self = vminitLifecycle(vm)initEvents(vm)initRender(vm)callHook(vm, 'beforeCreate')initInjections(vm) // resolve injections before data/propsinitState(vm)initProvide(vm) // resolve provide after data/propscallHook(vm, 'created')if (vm.$options.el) {vm.$mount(vm.$options.el)}}
}

我们可以看到，在执行beforeCreate之前，做了几件事：初始化生命周期initLifecycle，初始化事件initEvents，初始化RenderinitRender。
3.初始化生命周期initLifecycle
路径： \vue-dev\src\core\instance\lifecycle.js

export function initLifecycle (vm: Component) {// 获取new vue传入的参数对象const options = vm.$options// 定位vm选项第一个非抽象父级,没有的话为undefinedlet parent = options.parent//如果当前实例有父实例并且当前实例abstract为falseif (parent && !options.abstract) {// 当父实例的parent是抽象组件，向上查找，直到找到最顶级不是抽象的父实例while (parent.$options.abstract && parent.$parent) {parent = parent.$parent}// parent第一个非抽象parent，添加vm实例为子元素parent.$children.push(vm)}//vue实例定义$parent、$root、$children、$refs属性及其他属性// 指定已创建的实例之父实例，在两者之间建立父子关系。子实例可以用  this.$parent 访问父实例，子实例被推入父实例的 $children 数组中vm.$parent = parent// 当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己vm.$root = parent ? parent.$root : vm//  当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。vm.$children = []// 一个对象，持有已注册过 ref 的所有子组件vm.$refs = {}// 组件实例相应的 watcher 实例对象vm._watcher = null// 表示keep-alive中组件状态，如被激活，该值为false,反之为truevm._inactive = null// 也是表示keep-alive中组件状态的属性。vm._directInactive = false// 当前实例是否完成挂载(对应生命周期图示中的mounted)vm._isMounted = false// 当前实例是否已经被销毁(对应生命周期图示中的destroyed)vm._isDestroyed = false// 当前实例是否正在被销毁,还没有销毁完成(介于生命周期图示中deforeDestroy和destroyed之间)vm._isBeingDestroyed = false
}

我们可以看到，初始化生命周期函数中，vue判断当前组件是否存在父组件，如果存在，循环找到第一个非抽象父组件，并将vm push进去作为子元素。并且定义了$parent、$root、$children、$refs属性及其他属性。
注:
抽象组件：

就像官网说的一样，它在代码中存在，但是自身不会渲染一个 DOM 元素，也不会出现在父组件链中，不会体现在DOM树上。则非抽象组件正好相反。
定义的属性说明见代码块注释

4.初始化事件initEvents
路径：\vue-dev\src\core\instance\events.js

export function initEvents (vm: Component) {...
}
...省略
Vue.prototype.$once = function(){...}
Vue.prototype.$off= function(){...}
Vue.prototype.$emit = function(){...}
Vue.prototype.$on= function(){...}

我们可以看到，初始化事件其实是在Vue的原型上定义$once、$off、$emit、$on函数
5.初始化Render initRender
路径：\vue-dev\src\core\instance\render.js

export function initRender (vm: Component) {...省略vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)// normalization is always applied for the public version, used in// user-written render functions.vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
...省略
}

我们可以看到，初始化Render其实是封装createElement函数，让我们调用更简单。

所以，在调用beforeCreate()函数前，vue主要做了vm实例一些属性的定义和createElement()方法的封装。

vue生命周期beforeCreate()前做了什么相关推荐

uni-app页面生命与vue生命周期
问题前端新手小白,入手uni-app框架,一脸懵逼,从最简单的页面生命周期开始吧! 分析 uni-app的页面生命周期函数: onInit 监听页面初始化,为上个页面传递的数据,参数类型为 Obje ...
Vue生命周期，Vue中在哪个生命周期阶段调用异步请求最佳
Vue生命周期 beforeCreate(创建前): 在数据观测和初始化事件还未开始,data.watcher.methods都还不存在,但是$route已存在,可以根据路由信息进行重定向等操作. c ...
vue生命周期每个阶段可以做什么
解析vue生命周期每个阶段都做什么一.生命周期有哪些在 vue 的创建.使用.销毁过程中,会有许多事件,这些事件就被统称为生命周期函数,也叫作生命周期钩子,有beforeCreate( 创建前 ) ...
标注图+部分举例聊聊Vue生命周期
"你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高." 现在项目中遇到了,好好回头总结一波Vue生命周期,以后用到的时候再来翻翻. 啥叫Vue生命周 ...
vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 "react 是不是比 vue 牛皮,为什么?" 的问题,Vue.js 作者尤雨溪12月4日正面回应了该 ...
一文带你吃透Vue生命周期（结合案例通俗易懂）
文章目录本篇学习目标 1. vue生命周期 1.0_人的-生命周期 1.1_钩子函数 1.2_初始化阶段 1.3_挂载阶段 1.4_更新阶段 1.5_销毁阶段 2. axios 2.0_axios基 ...
“约见”面试官系列之常见面试题之第八十九篇之vue生命周期作用（建议收藏）
那么vue 生命周期有哪些阶段呢一.创建 1.beforeCreate:这个阶段实例已经初始化,只是数据观察与事件机制尚未形成,不能获取DOM节点(没有data,没有el) 使用场景:因为此时dat ...
“约见”面试官系列之常见面试题第四十一篇之VUE生命周期（建议收藏）
详解Vue Lifecycle 先来看看VUE官网对VUE生命周期的介绍 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称 ...
生命周期用户可以操作dom_当面试官问：能否介绍下Vue生命周期时，该如何回答...
上一篇文章中我们讲到了Vue框架的概念以及选用Vue的优劣势.本篇文章将就Vue进行进一步介绍-Vue生命周期. 首先每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的(受MV ...

vue生命周期beforeCreate()前做了什么

概念

beforeCreate

vue生命周期beforeCreate()前做了什么相关推荐

最新文章

热门文章