Vue.js生命周期

最新推荐文章于 2025-05-11 11:13:28 发布

原创最新推荐文章于 2025-05-11 11:13:28 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #生命周期 #钩子函数

Vue.js 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了Vue组件的生命周期，包括初始化、运行中、销毁三个阶段，详细阐述了各阶段的钩子函数，如初始化阶段的beforeCreate、created等，运行中阶段的beforeUpdate、updated等，还说明了钩子函数的概念，以及组件数据项data的要求。

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

什么是生命周期呢？

当前组件在创建到销毁经历的一系列过程，称之为生命周期

生命周期的分为几个阶段？每个阶段有哪些钩子函数

生命周期分为3个阶段，这三个阶段分别是：初始化、运行中、销毁；

初始化阶段：有4个钩子函数，触发条件是自动的

beforeCreate
1. 组件即将创建，进行组件事件和生命周期的初始化
2. 项目中一般不使用（兵哥）
3. 有的开发者也会在这里进行数据请求

  //初始化
beforeCreate () { 
 /* 
   这个阶段：组件创建前
     data  data选项中的数据获取不到
     RDOM  拿不到
     项目中： 没什么用
     但是这个阶段是一个对事件和生命周期的准备阶段，也是必不可少的
 */
 console.log('1-beforeCreate')
 console.log( 'data', this.money )
 console.log( '真实DOM',document.querySelector('h3') )
},

created
1. 组件创建完成
2. 项目中：
1）异步请求接口数据
2）数据修改

	 created () { // 组件创建结束
        /* 
         这个阶段：
           data  data选项中的数据获到了
           RDOM  拿不到
           项目中： 
               数据的修改
               异步数据请求
       */
       this.money = 20000
       console.log('2-created')
       console.log( 'data', this.money )
       console.log( '真实DOM',document.querySelector('h3') )
     },

beforeMount
1. 组件即将挂载
2. 判断根实例组件是否有el选项，如果没有，那么手动挂载，判断根实例组件中的其他子组件是否有template选项，如果没有，那么使用outerHTML插入
3. 项目中：
1）异步请求接口数据
2）数据修改

 beforeMount () { //组件即将挂载
    /* 
    这个阶段：
      data  data选项中的数据获到了
      RDOM  拿不到
      项目中： 
          数据的修改
          异步数据请求
  */
  this.money = 10000000
  console.log('3-beforeMount')
  console.log( 'data', this.money )
  console.log( '真实DOM',document.querySelector('h3') )
},

mounted
1. 组件挂载结束
2. 使用真实DOM替换VDOM
3. 项目中
1）异步请求接口数据
2）数据修改
3）真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化（静态数据渲染来的） )

 mounted () { //组件挂载结束了
    /* 
      这个阶段：
        data: 可以获得数据
        RDOM: 拿到了
        项目中： 
            数据修改
            异步数据请求
            真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化（静态数据渲染来的）  )

   */
   this.time = setInterval( () => {
    console.log( 1 )
   },1000)
    document.querySelector('h3').style.background  = 'red'
    console.log('4-mounted')
    console.log( 'data', this.money )
    console.log( '真实DOM',document.querySelector('h3') )
  },

总结
初始化过程中在项目中使用
数据请求：created
DOM操作： mounted
数据修改： beforeMount created mounted

运行中阶段：有2个钩子函数：触发条件是：当data选项中的数据发生改变时

beforeUpdate：
内部操作： vdom生成和diff的对比
我们可以不使用

 beforeUpdate () { //表示组件即将更新   vdom --diff--> vdom的不同（patch对象）
/* 
 这个阶段： 
   data: 拿到了
   RDOM： 获得
   这个阶段进行的是vdom的生成和diff算法的对比，都是内部进行的，我们在项目中可以不使用
*/
console.log(' 1- beforeUpdate ')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},

updated
Rdom已经生成，可以进行异步数据请求得到的dom渲染的第三方库实例化

  updated () { // 组件更新结束 ， 通过render函数将vdom渲染成了真实dom,然后驱动vue进行视图更新
  /* 
    这个阶段：
       动态数据的渲染，进行dom操作（ 第三方库的实例化 ）
   */
  document.querySelector('h3').style.background = 'blue'
  console.log(' 2- updated ')
  console.log( 'data', this.money )
  console.log( '真实DOM',document.querySelector('h3') )
},

销毁阶段：有2个钩子函数，这两个钩子函数没有什么去别，功能很相似

beforeDestory: 组件即将销毁，准备调用 $destroy() 方法
```
 beforeDestroy () {
  console.log( 'beforeDestroy ')
},
```

destoryed：组件销毁结束

 destroyed () {
  clearInterval( this.time )
  console.log( 'destroyed')
}

组件销毁的两种方式：
1. 使用$destroy()方法（内部销毁）
缺点：会将组件的模板也保留下来
2. 使用开关销毁（外部销毁）
v-if
这种类型的销毁不会留有模板

 <div id="app">
    <button @click = "flag = false"> 销毁 </button>
    <Hello v-if = "flag"></Hello>
  </div>
  <template id="hello">
    <div>
      <input type="text" v-model = "money">
      <h3> {{ money }} </h3>
    </div>
  </template>

Vue.component( 'Hello',{
    template: '#hello',
    data () { 
      return {
        money: 2000
      }
    }
 })
new Vue({
    // el: '#app',
    data: {
      msg: 'hello 1902',
      flag: true
    }
  }).$mount('#app')