526互联

【五】Vue之生命周期钩子函数

发布时间 2023-08-06 22:23:21作者: Chimengmeng

【一】生命周期图

【1】官网原图

【2】我理解的图

【二】生命周期

钩子函数 描述
beforeCreate 创建Vue实例之前调用
created 创建Vue实例成功后调用（可以在此处发送异步请求后端数据）
beforeMount 渲染DOM之前调用
mounted 渲染DOM之后调用
beforeUpdate 重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）
updated 重新渲染完成之后调用
beforeDestroy 销毁之前调用
destroyed 销毁之后调用
  • 挂载，把div挂载到组件中

【三】Vue的生命周期详解

  • Vue.js生命周期是指在Vue实例从创建到销毁的过程中，会经历一系列的钩子函数，这些钩子函数可以让我们在不同的阶段插入自定义的代码。
  • Vue的生命周期分为三个主要阶段：
    • 创建阶段
    • 更新阶段
    • 销毁阶段。

（1）创建阶段

  • beforeCreate:
    • 在实例初始化之后，数据观测和事件配置之前被调用。
    • 在这个阶段，Vue实例的属性和方法尚未初始化。
  • created:
    • 在实例创建完成后被立即调用。
    • 在这个阶段，Vue实例已经初始化，并且可以访问到data属性和methods方法。

（2）更新阶段

  • beforeMount:
    • 在挂载开始之前被调用。在这个阶段，模板编译已完成，但尚未将组件挂载到DOM中。
  • mounted:
    • 在挂载完成后被调用。
    • 在这个阶段，组件已经被挂载到DOM中，可以操作DOM元素。

（3）更新阶段

  • beforeUpdate:
    • 在组件更新之前被调用。
    • 在这个阶段，组件的数据已经被修改，但DOM尚未更新。
  • updated:
    • 在组件更新完成后被调用。
    • 在这个阶段，组件的数据已经更新，并且DOM也已经重新渲染。

（4）销毁阶段

  • beforeDestroy:

    • 在实例销毁之前被调用。
    • 在这个阶段，实例仍然可以访问data和methods，但已经无法访问到DOM元素。

  • destroyed:

    • 在实例销毁后被调用。
    • 在这个阶段，实例已经被销毁，所有的事件监听和观察者都已被移除。

  • 通过这些生命周期钩子函数，我们可以在不同的阶段执行一些特定的操作，例如初始化数据、发送请求、添加事件监听器等。

  • 这样可以更好地控制Vue实例的行为，并与外部环境进行交互。

【四】Vue的生命周期小结

  • new Vue()

    • 创建出来

  • 页面关闭

    • 被销毁掉

  • 这整个过程经历了一个周期

  • Vue 提供了一些钩子函数[写了就会执行，不写就不会被执行]

    • 到某个阶段，就会触发某个函数的执行

  • 8个生命周期钩子函数

    • beforeCreate
      • 创建Vue实例之前调用
    • created
      • 创建Vue实例成功后调用
    • beforeMount
      • 渲染DOM之前调用
    • mounted
      • 渲染DOM之后调用
    • beforeUpdate
      • 重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）
    • updated
      • 重新渲染完成之后调用
    • beforeDestroy
      • 销毁之前调用
    • destroyed
      • 销毁之后调用

  • 8个声明周期钩子，什么情况会用到

    • created:
      • 用的最多，变量初始化完成了(data中得数据)，在这里，我们发送ajax请求
    • beforeDestroy：
      • 组件销毁之前会执行
        • 组件创建，就执行一个定时任务[每隔1s，打印一个helloworld]
        • 组件销毁，定时任务要销毁，如果定时任务不销毁，会一直执行

（1）beforeCreate

  • 生命周期钩子函数beforeCreate在创建Vue实例之前调用。
  • 这时候Vue实例还没有初始化完成，通常在这个阶段我们可以进行一些初始化工作，比如配置项的处理、全局事件的处理等。

例如：

// Vue实例化之前的代码执行
new Vue({
  beforeCreate() {
    console.log('beforeCreate钩子函数被调用');
  },
  //...
});

（2）created

  • 生命周期钩子函数created在创建Vue实例成功后调用。
  • 在这个阶段，Vue实例已经完成了数据绑定、计算属性等操作，但是DOM还没有被挂载，可以在这个阶段进行一些初始化操作。

例如：

// Vue实例化之后的代码执行
new Vue({
  created() {
    console.log('created钩子函数被调用');
    // 可以在这里进行数据请求等异步操作
  },
  //...
});

（3）beforeMount

  • 生命周期钩子函数beforeMount在渲染DOM之前调用。
  • 在这个阶段，Vue实例已经完成了数据绑定和编译模板，但还没有将其挂载到真实的DOM上，可以在这个阶段进行一些DOM操作的准备工作。

例如：

new Vue({
  beforeMount() {
    console.log('beforeMount钩子函数被调用');
    // 可以在这里进行DOM操作的准备工作
  },
  //...
});

（4）mounted

  • 生命周期钩子函数mounted在渲染DOM之后调用。
  • 在这个阶段，Vue实例已经将模板编译成了真实的DOM，并挂载到了页面上，可以在这个阶段进行一些需要操作DOM的任务。

例如：

new Vue({
  mounted() {
    console.log('mounted钩子函数被调用');
    // 可以在这里操作DOM
  },
  //...
});

（5）beforeUpdate

  • 生命周期钩子函数beforeUpdate在重新渲染之前调用。
  • 在数据更新时，Vue会比较数据变化，然后重新渲染相应的DOM。在这个阶段，可以进行一些更新前的操作。

例如：

new Vue({
  beforeUpdate() {
    console.log('beforeUpdate钩子函数被调用');
    // 可以在这里进行DOM操作或其他数据更新前的操作
  },
  //...
});

（6）updated

  • 生命周期钩子函数updated在重新渲染完成之后调用。
  • 在这个阶段，DOM已经被更新完毕，并且是同步的。可以进行一些更新后的DOM操作。

例如：

new Vue({
  updated() {
    console.log('updated钩子函数被调用');
    // 可以在这里进行DOM操作或其他数据更新后的操作
  },
  //...
});

（7）beforeDestroy

  • 生命周期钩子函数beforeDestroy在Vue实例销毁之前调用。
  • 在这个阶段，Vue实例还完好无损，可以进行一些销毁前的清理工作，如清除定时器、解绑事件等。

例如：

new Vue({
  beforeDestroy() {
    console.log('beforeDestroy钩子函数被调用');
    // 可以在这里进行清理工作
  },
  //...
});

（8）destroyed

  • 生命周期钩子函数destroyed在Vue实例销毁之后调用。
  • 在这个阶段，Vue实例已经被销毁，此时无法继续访问实例的方法和属性。

例如：

new Vue({
  destroyed() {
    console.log('destroyed钩子函数被调用');
    // 可以在这里进行一些销毁后的清理工作
  },
  //...
});

【五】Vue的生命周期案例演示

  • 全局组件，生命周期
<body>
<div id="app">
    <h1>生命周期钩子</h1>
    <input type="text" v-model="username"> ------> {{username}}
    <h1>使用全局组件</h1>
    <button @click="hideModel">显示全局组件</button>
    <child v-if="show"></child>
</div>


</body>

<script>
    // 定义一个全局组件，组件有自己的html/css/js/事件....
    // `` 模版字符串,es6中的语法
    // 在组件中，data必须是函数，返回对象
    Vue.component('child', {
        template: `
            <div>
                <button @click="back">后退</button>
                <button>{{index_home}}</button>
                <button @click="forword">前进</button>
            </div>
            `,
        data() {
            return {
                index_home: '首页',
            }
        },
        methods: {
            back() {
                console.log('后退成功')
            },
            forword() {
                console.log('前进成功')
            },
        },
        // 生命周期函数
        beforeCreate() {
            console.log('beforeCreate钩子函数被调用');
        },
        created() {
            console.log('created钩子函数被调用');
            // 可以在这里进行数据请求等异步操作
            // 启动一个定时器
            this.t = setInterval(() => {
                console.log('hello world')
            }, 1000)
        },
        beforeMount() {
            console.log('beforeMount钩子函数被调用');
            // 可以在这里进行DOM操作的准备工作
        },
        mounted() {
            console.log('mounted钩子函数被调用');
            // 可以在这里操作DOM
        },
        beforeUpdate() {
            console.log('beforeUpdate钩子函数被调用');
            // 可以在这里进行DOM操作或其他数据更新前的操作
        },
        updated() {
            console.log('updated钩子函数被调用');
            // 可以在这里进行DOM操作或其他数据更新后的操作
        },
        beforeDestroy() {
            console.log('beforeDestroy钩子函数被调用');
            // 可以在这里进行清理工作
            // 销毁定时器
            clearInterval(this.t)
            this.t = null
        },
        destroyed() {
            console.log('destroyed钩子函数被调用');
            // 可以在这里进行一些销毁后的清理工作
        },
    })

    var vm = new Vue({
            el: '#app',
            data: {
                username: '',
                show: false,

            },
            methods: {
                hideModel() {
                    this.show = !this.show
                },
            },
        }
    )
</script>