Vue生命周期

最新推荐文章于 2024-11-17 10:41:40 发布

哈虎a

最新推荐文章于 2024-11-17 10:41:40 发布

阅读量115

点赞数 2

本文链接：https://blog.csdn.net/m0_58626552/article/details/123931546

版权

1 Vue 实例生命周期

1.1 生命周期钩子函数

每个 Vue 实例在被创建时都要经过一系列的初始化过程
生命周期分为三大阶段：初始化显示、更新显示、销毁Vue实例

初始化阶段的钩子函数：

beforeCreate() 实例创建前：数据和模板均未获取到
created() 实例创建后: 最早可访问到 data 数据，但模板未获取到
beforeMount() 数据挂载前：模板已获取到，但是数据未挂载到模板上
mounted() 数据挂载后：数据已挂载到模板中

更新阶段的钩子函数：

beforeUpdate() 模板更新前：data 改变后，更新数据模板前调用
updated() 模板更新后：将 data 渲染到数据模板中

销毁阶段的钩子函数：

beforeDestroy() 实例销毁前
destroyed() 实例销毁后

1.2 生命周期图示

在这里插入图片描述

1.3 示例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期</title>
</head>
<body>
    <div id="app">
        <h1>{{message}}</h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#app",  
            data:{
                message:"布卡"
            },
            beforeCreate() {
                //vue 实例创建前被调用，数据和模板均未获取到
                //应用的场景相对少，因为这个钩子函数阶段什么都还没获取到
                console.log("beforeCreate",this.$el,this.$data);
            },
            created() {
                //vue实例创建后，最早可以获取到data数据的钩子，但是模板未获取到
                //也就是说在这个阶段能够获取到数据，但是并没有渲染到模板中，因为模板还没有获取到
                //建议在这里发送ajax异步请求
                console.log("created",this.$el,this.$data);
            },
            beforeMount() {
                //数据挂载之前，获取到了模板，但是数据还未挂载到模板上
                console.log("beforeMount",this.$el,this.$data);
            },
            mounted() {
                //数据已经挂载到模板中了
                console.log("mounted",this.$el,this.$data);
            },
            beforeUpdate() {
                //想要测试数据更新，可以在浏览器console栏中输入vm.message="xxx"进行测试
                //当data数据更新之后，去更新模板中的数据前调用
                console.log("beforeUpdate",this.$el.innerHTML,this.$data);
            },
            updated() {
                //更新完成之后
                console.log("updated",this.$el.innerHTML,this.$data);
                
            },
            beforeDestroy() {
                //销毁vue实例之前调用
                //收尾工作，回收，释放之类的，比较常用
                console.log("beforeDestroy");
            },
            destroyed() {
                //销毁vue实例之后调用
                console.log("destroyed");
            },
        }).$mount("#app")//如果实例中没有el选项，可使用$mount()手动挂载Dom
        // vm.$destroy();//销毁vue实例方法
    </script>
</body>
</html>