Vue.js生命周期

本文介绍了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')
      

什么是钩子函数

钩子函数就是options配置项中的一个方法,在特定的触发条件( 时机 )下会自动触发

除了根实例组件以外,其他的组件中的数据项 data 必须是一个函数,而且这个函数必须返回一个对象

为什么是函数呢?
原因:我们希望组件的数据是独立的,有一定作用域的
为什么返回值是对象?
原因: 是为了符合 数据驱动 原理设计,让observer将data选项中的数据设置 getter 和 setter

注意:其他配置项要写在生命周期的前面

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值