解析-vue的生命周期

runRabbitGirl

已于 2023-07-13 11:09:49 修改

阅读量48

点赞数

文章标签： vue.js 前端前端框架

于 2023-07-11 16:16:34 首次发布

本文链接：https://blog.csdn.net/weixin_46162592/article/details/131659200

版权

1.new vue()

new Vue()是实例化一个Vue实例，它内部执行了根实例的初始化过程。具体包括：选项合并(用户选项、默认选项)、$children、$refs、$slots、$createElement 等实例属性和方法初始化、自定义事件处理、数据响应式处理、生命周期钩子调用、可能的挂载。

2.Init events&lifecycle

初始化事件和生命周期。这个过程中分别调用了3个初始化函数（ initLifecycle(), initEvents(), initRender() ），分别初始化了生命周期，事件以及定义createElement函数，初始化生命周期时定义了一些属性，如表示当前生命周期状态的 _isMounted ，_isDestroyed ，_isBeingDestroyed，表示keep-alive中组件状态的_inactive等，而初始化event时，实际上就是定义了$once、$off、$emit、$on几个函数。而createElement函数是在初始化render时定义的（调用了initRender函数）。此时的data、methods、el等等都不存在，还没有初始化数据。

3.beforeCreate()

beforeCreate函数是创建实例之前执行的钩子事件。此钩子函数运行时，数据还没有挂载，vue只是一个空壳，无法访问数据和$el，computed 和 watch 的数据也不能访问，输出data和methods中的数据是空的。

接下来是数据初始化阶段

4.init injections&reactivity

初始化注入事件和反射。在这个阶段初始化数据和事件，包括data和methods，但是还没编译模板。

injections，依赖注入，vue中有provide和inject，可以将父组件provide中的对象注入到子孙的属性中。
reactive，将数据包装成一种可观测的类型，当数据产生变更的时候，我们能够感知到。这个操作后data数据应该就可以是响应的了。

5.created()

实例创建完成后执行的钩子事件。此时可以使用created钩子函数获取到vue中初始化的数据。此时组件实例创建完成，属性和方法已绑定，但是DOM还未生成执行的钩子函数，挂载未开始，模板还没有渲染成html。

接下来是模板编译阶段

6.①判断 el 的挂载方式

检查vue配置，即new Vue{}里面的el项是否存在。有就继续检查template项；没有则手动调用 vm.$mount(el) 挂载。

// 一般vue项目的main.js里面是这样的
export default new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

// 有些vue项目中用的是这样的
export default new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')


// 后者，就相当于是手动调用了$mount了

②选择模板template 的编译方式

把data对象里的数据和vue语法声明的模板编译成浏览器可读的HTML。检查配置中的template项，有template就将template模板转换成render函数；如果没有template就直接将获取到的el（也就是我们常见的#app，#app里面可能还会有其他标签）编译成templae, 然后在将这个template转换成render函数。此时在内存中生成虚拟DOM，但是不会挂载到页面中。