vue2.0生命周期（二）

最新推荐文章于 2025-05-19 23:55:11 发布

转载最新推荐文章于 2025-05-19 23:55:11 发布 · 118 阅读

本文深入探讨Vue.js的生命周期，从实例化到销毁的各个阶段，包括beforeCreate、created、beforeMount、mounted等钩子函数的作用及执行时机，并通过示例代码进行验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Vue对象实例化

JS代码:

new Vue({
  /* DOM挂载点 */
  el: '#app',
  /* 使用哪个模板 */
  template: '<div>{{fruit}}</div>',
  /* 给模板传递的数据 */
  data: {
    fruit: 'apple'
  }
})

其中Vue函数称为构造函数，使用new就可以实例化出来一个实例化对象。

二、Vue的生命周期

刚刚接触Vue.js, 之前使用React.js知道需要搞清楚它的生命周期及其每个钩子函数的含义。

Vue生命周期.png

钩子函数	Description
beforeCreate	组件实例刚被创建，组件属性计算之前，如data属性等
created	组件实例创建完成，属性已绑定，但DOM还未生成，$el属性还不存在
beforeMount	模板编译/挂载之前
mounted	模板编译/挂载之后
beforeUpdate	组件更新之前
updated	组件更新之后
activated	for keep-alive, 组件被激活时调用
deactivated	for keep-alive, 组件被移除时调用
beforeDestory	组件销毁前调用

2.1生命周期的探究

对于执行顺序和什么时间执行，看上面的图会比较没有太多的耐心，因此先看一下钩子函数的执行然后再回头看图会更容易理解。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
var app1 = new Vue({
  el: '#app',
  router,
  data: {
    message: 'kuaixiang'
  },
  beforeCreate: function () {
    console.group('beforeCreate 创建之前:')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.message)
  },
  created: function () {
    console.group('created 创建完毕:')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.message)
  },
  beforeMount: function () {
    console.group('beforeMount 挂载前:')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.message)
  },
  mounted: function () {
    console.group('mounted 挂载结束:')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.message)
  },
  beforeUpdate: function () {
    console.group('beforeUpdate 更新前:')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.message)
  },
  updated: function () {
    console.group('updated 更新完成:')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.message)
  },
  beforeDestory: function () {
    console.group('beforeDestory 销毁之前:')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.message)
  },
  destroyed: function () {
    console.group('destroyed 销毁完成:')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.message)
  },
  template: '<App/>',
  components: { App }
})

console.log(app1)