生命周期Life Cycle

含义

指一个组件从创建->运行->销毁的整个时间段，强调的是一个时间段。

生命周期函数

含义

vue框架提供的内置函数，会伴随组件的生命周期，自动按次序运行。

分类

0. 组件创建阶段
1. 组件运行阶段
2. 组件销毁阶段

1. 组件创建阶段

最多只执行一次

new Vue() ——> beforeCreate ——> created ——> beforeMount(渲染之前) ——> mounted ——>

2. 组件运行阶段

执行0——n次

——> beforeUpdate ——> undated ——>

3. 组件销毁阶段

最多只执行一次

——> beforeDestory ——> destoryed

图示实例的生命周期

一个组件从创建到销毁的过程

webpack从main.js开始打包，发现main.js里面用到了App，然后把App的实例创建出来，App里面又用到了child，child里又用到了count;以树的形式嵌套。webpack把整个树解析，转换，编译成js代码以src形式放到index.html内。浏览器再解析编译这个代码，渲染到页面上。

图解

解释

1. new Vue()：创建组件的实例对象
2. init Events&Lifecycle：初始化事件和生命周期函数
3. beforeCreate：组件的props/data/methods尚未被创建，都处于不可用状态
4. init injections&reactivity：初始化props/data/methods
5. created：组件的props/data/methods已创建好，都处于可用的状态，但是组件的模板结构尚未生成！ ,这个阶段非常重要，可以发起ajax请求。

常用的生命周期钩子函数：

0. beforeCreate：在实例被创建之前调用，此时组件的数据、事件等还未初始化。
1. created：在实例创建完成后调用，此时组件的数据、事件等已经初始化完成，可以进行数据的获取和处理。
2. beforeMount：在组件挂载到 DOM 之前调用，此时组件的模板已经编译完成，但尚未挂载到页面。
3. mounted：在组件挂载到 DOM 后调用，此时组件已经被添加到页面中，可以进行 DOM 操作和异步请求等操作。
4. beforeUpdate：在组件更新之前调用，当组件的数据发生变化时会触发该钩子函数。
5. updated：在组件更新完成后调用，当组件的数据变化导致重新渲染时会触发该钩子函数。
6. beforeDestroy：在组件销毁之前调用，可以进行一些清理工作，比如清除定时器、解绑事件等。
7. destroyed：在组件销毁后调用，此时组件实例已经被销毁，不再可用。

另外还有一些较少用到的钩子函数，如 activated 和 deactivated，它们是用于配合 Vue Router 中的路由切换过渡效果的。

需要注意的是，Vue 3.x 版本中的生命周期钩子函数发生了一些变化，具体的钩子函数名称和调用时机可能有所不同，详细信息可以参考 Vue 官方文档。

在使用生命周期钩子函数时，你可以在组件内部通过在 methods 中定义相应的函数来实现特定的逻辑。每个生命周期钩子函数都会传入一个参数，代表当前的生命周期上下文，你可以在函数中访问和操作组件的数据、方法等。

综合示例

<template>
<div class="test-container">
  <h3 id="myh3">Test.vue 组件 --- {{ books.length }} 本图书</h3>
  <p id="pppp">message 的值是：{{ message }}</p>
  <button @click="message += '~'">修改 message 的值</button>
  </div>
</template>
​
<script>
  export default {
    props: ['info'],
    data() {
      return {
        message: 'hello vue.js',
        // 定义 books 数组，存储的是所有图书的列表数据。默认为空数组！
        books: []
      }
    },
    watch: {
      message(newVal) {
        console.log('监视到了 message 的变化：' + newVal)
      }
    },
    methods: {
      show() {
        console.log('调用了 Test 组件的 show 方法！')
      },
      // 使用 Ajax 请求图书列表的数据
      initBookList() {
        const xhr = new XMLHttpRequest()
        xhr.addEventListener('load', () => {
          const result = JSON.parse(xhr.responseText)
          console.log(result)
          this.books = result.data
        })
        xhr.open('GET', 'https://ajax-base-api-t.itheima.net/api/getbooks')
        xhr.send()
      }
    },
    // 创建阶段的第1个生命周期函数
    beforeCreate() {
      // console.log(this.info)
      // console.log(this.message)
      // this.show()
    },
    created() {
      // created 生命周期函数，非常常用。
      // 经常在它里面，调用 methods 中的方法，请求服务器的数据。
      // 并且，把请求到的数据，转存到 data 中，供 template 模板渲染的时候使用！
      this.initBookList()
​
      const dom = document.querySelector('#myh3')
      console.info(dom)//null//此时组件还未被添加到页面，模板结构尚未生成！
    },
    beforeMount() {//这个生命周期函数没什么意义，几乎无用
      //这个生命周期函数里也可以发送ajax请求，但是越早发早生成数据。因此还是created阶段。
      //console.info('beforeMount')//beforeMount
      //const dom = document.querySelector('#myh3')
      ///console.info(dom)//null
    },
​
    // 如果要操作当前组件的 DOM，最早，只能在 mounted 阶段执行
    mounted() {
      //$el 是 Vue 实例的一个属性，用于访问实例对应的根 DOM 元素
      console.info(this.$el)
      const dom = document.querySelector('#myh3')
      console.info(dom)
    },
​
    //data发生变化就会触发这个函数，将最新的数据，重写渲染模板结构。
    beforeUpdate() {
      //钩子函数在组件数据更新之前被调用，此时组件的数据已经更新，但尚未应用到 DOM 上。它在组件更新之前提供了一个操作数据的时机。
      console.log('beforeUpdate')
      console.log(this.message)//每次按下按钮，在beforeUpdate阶段数据发生了变化。
      const dom = document.querySelector('#pppp')
      console.log(dom.innerHTML)//每次按下按钮，在beforeUpdate阶段dom还没变。
    },
​
    // 当数据变化之后，为了能够操作到最新的 DOM 结构，必须把代码写到 updated 生命周期函数中
    updated() {
      // console.log('updated')
      // console.log(this.message)
      // const dom = document.querySelector('#pppp')
      // console.log(dom.innerHTML)
    },
​
    beforeDestroy() {
      console.log('beforeDestroy')
      this.message = 'aaa'
      console.log(this.message)
    },
    destroyed() {
      console.log('destroyed')
      // this.message = 'aaa'
    }
  }
</script>
​
<style lang="less" scoped>
  .test-container {
    background-color: pink;
    height: 200px;
  }
</style>

$el

$el 是 Vue 实例的一个属性，用于访问实例对应的根 DOM 元素。

在 Vue 组件中，$el 指向组件实例渲染后的根元素。可以通过 $el 访问和操作组件的 DOM 元素，例如修改样式、添加事件监听器等。

需要注意的是，在组件的生命周期钩子函数 beforeMount 和 mounted 之前，$el 是 undefined，因为组件还没有被渲染到 DOM 中。只有在组件完成挂载后，$el 才会指向实际的 DOM 元素。

另外，使用 $el 直接操作 DOM 元素可能会违背 Vue 的数据驱动思想，因为它绕过了 Vue 的响应式系统。推荐在组件中使用 Vue 的数据绑定和指令来管理 DOM，只在必要的情况下才使用 $el 来进行低层次的 DOM 操作。

示例

<script>
// 访问根元素
console.log(this.$el);
​
// 修改根元素的样式
this.$el.style.backgroundColor = 'red';
​
// 添加事件监听器到根元素
this.$el.addEventListener('click', handleClick);
​
// 在钩子函数中使用 $el
mounted() {
// 在组件挂载后可以访问和操作 $el
console.log(this.$el);
}
​
// 在自定义方法中使用 $el
customMethod() {
// 在自定义方法中可以访问和操作 $el
console.log(this.$el);
}
</script>