Vue实例的生命周期

一code当先

已于 2023-03-24 15:47:56 修改

阅读量197

点赞数 1

分类专栏：前端文章标签： vue vue生命周期前端前端框架 vue.js

于 2019-07-06 22:49:14 首次发布

本文链接：https://blog.csdn.net/xp_xpxp/article/details/94909745

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.什么是生命周期?

从vue实例创建,运行,到销毁期间,总是伴随着各种各样的事件,这些事件统称为生命周期

如图
在这里插入图片描述

2.生命周期函数(生命周期钩子/生命周期事件)

2.1.vue实例创建阶段的函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue实例生命周期</title>
    <style type="text/css">
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>

<div id="app">
    <p v-cloak><h3>{{msg}}</h3></p>
</div>

<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
    var vm = new Vue({
        el: '#app',
        data: {
            msg:'ok'
        },
        methods: {
            show(){
                console.log("show");
            }
        },
        //第一个生命周期函数,表示vue实例完全被创建出来之前会执行他
        //该函数执行的时候,data和methods中的内容还没有初始化
        beforeCreate(){
            console.log("beforeCreate");
        },
        //第二个生命周期函数,表示data和methods内容都已经被初始化好了
        created(){
            console.log("created");
            this.show();
        },
        //第三个生命周期函数,表示模板(el属性控制的元素)已经在内存中编译完成,即将(/还未)挂载/渲染到页面上
        beforeMount(){
            console.log("beforeMount");
        },
        //第四个生命周期函数,表示内存中的模块(el属性控制的元素)已经真实渲染到页面上,用户已经可以看到了
        //这是vue实例创建期间最后一个生命周期函数,当执行完mounted函数,就表示vue实例已经完全被创建好了,
        //此时如果没有其他操作,vue实例就存在于内存中
        mounted(){
            //如果要通过某些插件操作页面上的DOM节点,最早要在该函数中,因为执行到这里vue实例才真正的创建好
        }
    })
</script>
</body>
</html>

2.2.组件运行和销毁阶段的函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue实例生命周期</title>
    <style type="text/css">
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>

<div id="app">
    <p v-cloak><h3 id="h3">{{msg}}</h3></p>
    <input type="button" value="修改" @click="changeData"/>
</div>

<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
    var vm = new Vue({
        el: '#app',
        data: {
            msg:'ok'
        },
        methods: {
            show(){
                console.log("show");
            },
            changeData(){
                this.msg='vue';
            }
        },
        //第五个生命周期函数,表示界面还没有被更新,但是data数据已经更新了
        beforeUpdate(){
            console.log("beforeUpdate");
            console.log(document.getElementById('h3').innerText);
            console.log(this.msg);
        },
        //当beforeupdate函数执行完毕之后,先根据data中最新的数据,在内存中重新渲染出一份最新的内存dom树
        //当最新的内存dom树被更新之后,会把最新的内存dom树重新渲染到真实的页面上,以完成数据从data[model]-->view层的更新
        //第六个生命周期函数,表示页面和data中的数据已经保持一致了
        updated(){
            console.log("updated");
        },
        //第七个生命周期函数,表示vue实例从运行阶段进入到销毁阶段,vue实例中所有的组件(data,methods...)都处于可用状态
        //还没有真正执行销毁操作
        beforeDestroy(){
        },
        //第八个生命周期函数,表示真正执行vue中所有的组件销毁操作,所有的组件都不可用
        destroyed(){
        }
    })
</script>
</body>
</html>

一code当先

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue实例的生命周期

1.什么是生命周期?从vue实例创建,运行,到销毁期间,总是伴随着各种各样的事件,这些事件统称为生命周期如图2.生命周期函数(生命周期钩子/生命周期事件)2.1.vue实例创建阶段的函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <ti...
复制链接

扫一扫