7.Vue的生命周期

最新推荐文章于 2022-07-17 01:38:46 发布

耶瞳

最新推荐文章于 2022-07-17 01:38:46 发布

阅读量294

点赞数 5

分类专栏： js 文章标签： vue js

本文链接：https://blog.csdn.net/tongkongyu/article/details/117267532

版权

js 专栏收录该内容

50 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 
        Vue的生命周期：
            每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。
            在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。
        Vue生命周期分析：
        1. 创造期间的生命周期函数： 
            * beforeCreate() ：实例刚在内存中被创建出来，但还没有初始化好data和methods属性
            * created() ：实例已经在内存中创建OK，此时data和methods已经创建OK，还没有开始编译模板
            * beforeMount() ：此时已经完成了模板的编译，但还没有挂载到页面中
            * mounted() ：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
        2. 运行期间的生命周期函数：
            * beforeUpdate() ：状态更新之前执行此函数，此时data中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
            * updated() ：实例更新完毕之后调用此函数，此时data中的状态值和界面上显示的数据都已经完成了更新，界面已经被重新渲染好了
        3. 销毁期间的生命函数
            * beforeDestory() ： 实例销毁之前调用，在这一步，实例仍然完全可用
            * destoryed() ：Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
    -->
    <div id="app">
        <input type="button" value="修改msg" @click="msg = 'msg被修改了'">
        <input type="button" value="销毁实例" @click="destory">
        <h3 id="h3">{{msg}}</h3>
    </div>
    <script>
        // 创建Vue实例，得到ViewModel
        const app = new Vue({
            el: '#app',
            data: {
                msg: '得到了msg'
            },
            methods: {
                show() {
                    console.log("执行了show方法");
                },
                destory() {
                    console.log("执行destory函数");
                    console.log(this);
                    this.$destroy();
                }
            },
            beforeCreate() { // 实例完全被创建出来之前会执行它
                console.log("--- beforeCreate ---");
                console.log(this.msg); // undefined
            },
            created() { // 如果要调用methods中的方法，或操作data中的数据，最早只能在created中操作
                console.log("--- created ---");
                console.log(this.msg);
                this.show();
            },
            beforeMount() { //已经在内存中编译好，但没有把模板挂载到页面
                console.log("--- beforeMount ---");
                console.log(document.getElementById('h3').innerText);
            },
            mounted() { //内存中的模板已经真实的挂载到了页面，实例已完全创建好了
                console.log("--- mounted ---");
                console.log(document.getElementById('h3').innerText);
            },
            beforeUpdate() { // 数据被更新了但界面还没有被更新
                console.log("--- beforeUpdata ---");
                console.log( '界面的msg: ' + document.getElementById('h3').innerText);
                console.log( 'data中的msg: ' + this.msg);
            },
            updated() { // 页面和数据都已更新
                console.log("--- updated ---");
                console.log( '界面的msg: ' + document.getElementById('h3').innerText);
                console.log( 'data中的msg: ' + this.msg);
            },
            beforeDestory() { // 实例被执行销毁操作但还没有被销毁
                console.log("--- beforeDestory ---");
                console.log(document.getElementById('h3').innerText);
            },
            destoryed() { // 实例被销毁
                console.log("--- destoryed ---");
                console.log(document.getElementById('h3').innerText);
            }
        })
    </script>
</body>
</html>

更多相关内容大家可以前往我的个人博客浏览：eyes++的个人空间

耶瞳

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
7.Vue的生命周期

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
复制链接

扫一扫