生命周期

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

ccc_y

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

阅读量257

点赞数

CC 4.0 BY-SA版权

文章标签： vue 生命周期 js

本文链接：https://blog.youkuaiyun.com/ccc_y/article/details/92067207

生命周期

生命是生命周期呢？
当前组件在创建到销毁经历的一系列过程，称之为生命周期
生命周期的分为几个阶段？每个阶段有哪些钩子函数
生命周期分为3个阶段，这三个阶段分别是：初始化、运行中、销毁
- 初始化阶段：有4个钩子函数，触发条件是自动的
  beforeCreate
  1. 组件即将创建，进行组件事件和生命周期的初始化
  2. 项目中一般不使用
  3. 有的开发者也会在这里进行数据请求
  created
  1. 组件创建完成
  2. 项目中：
  1）异步请求接口数据
  2）数据修改
  beforeMount
  1. 组件即将挂载
  2. 判断根实例组件是否有el选项，如果没有，那么手动挂载，判断根实例组件中的其他子组件是否有template选项，如果没有，那么使用outerHTML插入
  3. 项目中：
  1）异步请求接口数据
  2）数据修改
  mounted
  1. 组件挂载结束
  2. 使用真实DOM替换VDOM
  3. 项目中
  1）异步请求接口数据
  2）数据修改
  3）真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化（静态数据渲染来的） )
  - 总结：初始化过程中在项目中使用
  数据请求：created
  DOM操作： mounted
  数据修改： beforeMount created mounted

    Vue.component('Hello', {
        template: '#hello',
        data() { //除了根式
            return {
                money: 2000
            }
        },
        //初始化
        beforeCreate() {
            /* 
              这个阶段：组件创建前
                data  data选项中的数据获取不到
                RDOM  拿不到
                项目中： 没什么用
                但是这个阶段是一个对事件和生命周期的准备阶段，也是必不可少的
            */
            console.log('1-beforeCreate')
            console.log('data', this.money)
            console.log('真实DOM', document.querySelector('h3'))
        },
        created() { // 组件创建结束
            /* 
        这个阶段：
          data  data选项中的数据获到了
          RDOM  拿不到
          项目中： 
              数据的修改
              异步数据请求
      */
            this.money = 20000
            console.log('2-created')
            console.log('data', this.money)
            console.log('真实DOM', document.querySelector('h3'))
        },
        beforeMount() { //组件即将挂载
            /* 
        这个阶段：
          data  data选项中的数据获到了
          RDOM  拿不到
          项目中： 
              数据的修改
              异步数据请求
      */
            this.money = 10000000
            console.log('3-beforeMount')
            console.log('data', this.money)
            console.log('真实DOM', document.querySelector('h3'))
        },
        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'))
        }

  - 运行中阶段：有2个钩子函数 ： 触发条件是： 当data选项中的数据发生改变时
                  beforeUpdate： 
                    内部操作 ：  vdom生成和diff的对比
                    我们可以不使用
                  updated
                    Rdom已经生成，可以进行异步数据请求得到的dom渲染的第三方库实例化

		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() { // 组件更新结束 ， 通过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() 方法
                  destoryed： 组件销毁结束

                  这两个钩子函数没有什么去别，功能很相似
        
                  项目中： 
                    这两个钩子函数都可以用来做善后,把一些计时器，第三方库实例化出来的实例

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

    有一个钩子函数可以不写，这个钩子函数就是我们  render  函数

生命周期中钩子函数的触发条件是什么？
项目中如何使用？
名词解释：
钩子函数：钩子函数就是options配置项中的一个方法，在特定的触发条件（时机）下会自动触发
除了根实例组件以外，其他的组件中的数据项data必须是一个函数，而且这个函数必须返回一个对象
为什么是函数呢？
原因：我们希望组件的数据是独立的，有一定作用域的
为什么返回值是对象？
原因：是为了符合数据驱动原理设计，让observer将data选项中的数据设置 getter 和 setter
其他选项写在生命周期的上