生命周期钩子函数

在Vue.js中，组件有自己的生命周期钩子函数，它们是在组件不同阶段执行的特定方法。通过这些生命周期钩子函数，我们可以在组件的不同阶段执行自定义的逻辑。
生命周期钩子函数：在特定的阶段就会执行的回调函数

vue生命周期和生命周期的四个阶段

创建阶段
挂载阶段
更新阶段
销毁阶段

1.创建阶段

beforeCreate : 创建前

在实例初始化之后、数据观测之前被调用。在这个阶段，组件的选项和数据并未被初始化。

created : 创建完成后

在实例创建完成后被调用。此时，组件的数据观测已经完成，可以访问到组件的数据、方法等。

2.挂载阶段

beforeMount : 挂载前

在组件挂载到DOM之前被调用。在这个阶段，模板已经编译完成，但尚未渲染到页面上。

mounted : 挂载后

在组件挂载到DOM后被调用。此时，组件已经渲染到页面上，可以进行DOM操作和异步请求。

3.更新阶段

beforeUpdate： 更新前

在组件更新之前被调用。在这个阶段，组件的数据发生变化，但尚未重新渲染。

updated : 更新后

在组件更新之后被调用。此时，组件的数据已经更新，并且DOM也已经重新渲染。

4.销毁阶段

beforeDestroy : 销毁前

在组件销毁之前被调用。在这个阶段，组件仍然完全可用。

destroyed : 销毁后

在组件销毁之后被调用。在这个阶段，组件及其相关的DOM已经被完全清除。

注：

创建阶段 和 挂载阶段 可统称为初始化阶段。
除了上述的钩子函数，Vue.js还提供了一些其他的生命周期钩子，例如activated和deactivated，用于处理组件在keep-alive组件中的缓存和激活状态。

示例代码：

初始化阶段只会执行一次（创建阶段、挂载阶段）
更新阶段会反复执行
实例vue中的对象称为：选项对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
      <div id="app">
         <p>{{msg}}</p>
      </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        //初始化阶段只会执行一次（创建阶段、挂载阶段）
        // 更新阶段会反复执行
        // 实例vue中的对象称为： 选项对象
      const vm = new Vue({
        el:'#app',
        data: {
         msg:'hello'
        },
        // 创建前
        // vue是空的实例 ，这个时候什么也没有，this.msg是空的
        beforeCreate(){
            console.log('beforeCreate')
            console.log(this.msg)
            
            console.log('------------------------')
        },
        // 创建后
        // 数据准备好了，还没有和视图建立关联
        // console.log(this.$el.innerHTML) 获取不到
        created(){
            console.log('created')
            console.log(this.msg)
            console.log(this.$el.innerHTML)
            console.log('------------------------')
        },
        // 挂载前
        // 数据准备好了,视图建立联系了， 但数据和视图没有同步
        beforeMount(){
            console.log(' beforeMount')
            console.log(this.msg)
            console.log(this.$el.innerHTML)
            console.log('------------------------')
        },
        // 挂载后
        // 数据准备好了、视图建立联系了、数据和视图已同步
        mounted(){
            console.log('mounted')
            console.log(this.msg)
            console.log(this.$el.innerHTML)
            console.log('------------------------')
        },
      })
    </script>
</body>
</html>

常用 created(发送ajax) mounted(操作DOM) beforeDestroy(清理工作清定时器清DOM事件)

$el.innerHTML el可以理解为整个app dom

生命周期钩子函数

生命周期钩子函数

vue生命周期 和 生命周期的四个阶段

1.创建阶段

2.挂载阶段

3.更新阶段

4.销毁阶段

注：

示例代码：

vue生命周期和生命周期的四个阶段