Vue-生命周期-CSDN博客

本文链接：https://blog.csdn.net/m0_73839298/article/details/139025946

什么是生命周期？

在Vue.js中，生命周期指的是Vue组件从创建到销毁期间会经历的一系列状态变化。又名：生命周期回调函数、生命周期函数、生命周期钩子Vue提供了多个生命周期钩子（lifecycle hooks），允许开发者在组件生命周期的不同阶段执行特定的逻辑，注意!Vue是在关键时刻帮我们调用的一些特殊名称的函数，生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的，生命周期函数中的this指向是vm或组件实例对象。

生命周期钩子

beforeCreate(): 在组件实例初始化之后被调用。此时，组件的选项（例如data、computed、watch等）还未开始处理。
created(): 在组件实例创建完成后被调用，但它的$el属性（即组件的DOM元素）尚未生成，且data对象还未响应式处理。这意味着你无法通过DOM操作或对data对象的更改来访问或修改组件。
beforeMount(): 在挂载开始之前被调用：相关的$el和data已经设置好，但是它们尚未插入到文档中（mounted钩子之后会发生）。
mounted(): 在组件实际挂载到DOM树上之后被调用。此时，你可以访问到组件的DOM元素，并且可以执行DOM操作。
beforeUpdate(): 在响应式数据更新之前调用，发生在虚拟DOM重新渲染和打补丁的更新周期开始之前。
updated(): 响应式数据更新后调用，此时组件DOM已经更新，可以执行依赖于数据更新的DOM操作。
beforeDestroy(): 在Vue实例销毁之前调用。在这一步中，实例仍然完全可用。
destroyed(): 在Vue实例销毁之后调用。此时，所有的数据绑定都被解除，所有的子Vue实例也都被销毁。
activated() 和 deactivated(): 仅在keep-alive缓存的组件中被调用。当组件被插入到DOM中时（或者缓存后被重新激活），activated被调用；当组件被移除时（或者被缓存），deactivated被调用。
errorCaptured(): 当捕获一个来自子孙组件的错误时被调用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="icon" href="img/network.png" type="image/x-icon">
    <script src="js/Vue.js"></script>
    <!-- 引入Vue.js文件 -->
</head>

<body>

    <div id="root">
        <h2 :style="{opacity}">欢迎光临！</h2>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;
        //阻止Vue在启动时生成生产提示

        const vm = new Vue({
            el: '#root',
            data: {
                opacity: 1
            },
            mounted() {
                setInterval(() => {
                    this.opacity -= 0.01
                    if (this.opacity <= 0) this.opacity = 1
                }, 16)
            },
        })

        // setInterval(() => {
        //     vm.opacity -= 0.01
        //     if (vm.opacity <= 0) vm.opacity = 1
        // }, 16)
        //定时器实现
    </script>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="icon" href="img/network.png" type="image/x-icon">
    <script src="js/Vue.js"></script>
    <!-- 引入Vue.js文件 -->
</head>

<body>

    <div id="root">
        <h2 :style="{opacity}">欢迎光临！</h2>
        <button @click="stop">停止</button>
        <button @click="opacity = 1">透明度:1</button>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;
        //阻止Vue在启动时生成生产提示

        const vm = new Vue({
            el: '#root',
            data: {
                opacity: 1
            },
            methods: {
                stop() {
                    this.$destroy()
                }
            },
            mounted() {
                console.log('mounted', this)
                this.timer = setInterval(() => {
                    console.log('setInterval');
                    this.opacity -= 0.01
                    if (this.opacity <= 0) this.opacity = 1
                }, 16)
            },
            beforeDestroy() {
                console.log('vm即将驾鹤西游了')
                clearInterval(this.timer)
            },
        })
    </script>

</body>

</html>