Vue生命周期

什么是Vue生命周期

指的是Vue从创建到销毁整个过程

在官网中这样说到"每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤"以及"在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。"

官网图示如下

Vue生命周期函数

初始化显示
- beforeCreate()
- created()
- beforeMount()
- mounted()
更新状态:this.xxx=value
- beforeUpdate()
- updated()
销毁Vue实例vm.%destory()
- beforeDestory()
- destoryed()
注册生命周期钩子

onMounted钩子可在组件完成初始渲染并创建DOM节点后运行代码

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`the component is now mounted.`)
})
</script>

常用方法

1）mounted()

发送AJAX请求、启动定时器、绑定自定义事件、订阅消息等异步任务（初始化操作）

2）beforeDestroy()

如: 清除定时器、解绑自定义事件、取消订阅消息等（收尾工作）

注意！

生命周期函数的名字不可更改，但函数内容是由程序员根据需求编写
生命周期函数中的 this 指向是 vm 或组件实例对象

销毁时注意
1. 销毁后借助 Vue 开发者工具看不到任何信息
2. 销毁后自定义事件会失效，但原生 DOM 事件依然有效
3. 一般不会在 beforeDestroy 操作数据，因为即便操作数据，也不会再触发更新流程

<script>
        //创建一个Vue对象实例
        new Vue({
            el:'#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器(id选择器)
            data:{//data属性用于存储页面渲染的数据
                name:'3DG',
                address:'成都'
            },
            //Vue生命周期钩子函数
            beforeCreate(){
                console.log("调用beforeCreate");
            },
            created(){
                console.log("调用created");
            },
            beforeMount(){
                console.log("调用beforeMount");
            },
            mounted(){
                //vue创建完成，可完全使用vue兑现实现数据初始化工具
                console.log("调用mounted");
            },
            beforeUpdate(){
                console.log("调用beforeUpdate");
            },
            updated(){
                console.log("调用updated");
            },
            beforeDestroy(){
                console.log("调用beforeDestroy");
                alert("销毁前")
            },
            destroyed(){
                console.log("调用destrouyed");
                alert("销毁后")
            }
        })
    </script>

526互联

Vue生命周期

Vue生命周期

什么是Vue生命周期

Vue生命周期函数