Vue生命周期测试

最新推荐文章于 2022-09-04 21:15:00 发布

I am jack

最新推荐文章于 2022-09-04 21:15:00 发布

阅读量201

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/qq_44932835/article/details/113395016

版权

在这里插入图片描述
读懂这张图搞懂两个单词就好了：
①render：渲染，指把要在浏览器显示的内容（也就是要挂载的内容）准备好。
②mounted：挂载，指把准备好的要显示的内容显示出来。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>vuejs生命周期</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>

<body>
<div id="app">
    {{message}}
</div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: 'hello world'
        },
        beforeCreate: function() {
            console.log(this);
            showData('创建vue实例前', this);
        },
        created: function() {
            showData('创建vue实例后', this);
        },
        beforeMount: function() {
            showData('挂载到dom前', this);
        },
        mounted: function() {
            showData('挂载到dom后', this);
        },
        beforeUpdate: function() {
            showData('数据变化更新前', this);
        },
        updated: function() {
            showData('数据变化更新后', this);
        },
        beforeDestroy: function() {
            vm.test = "3333";
            showData('vue实例销毁前', this);
        },
        destroyed: function() {
            showData('vue实例销毁后', this);
        }
    });

    function realDom() {
        console.log('真实dom结构：' + document.getElementById('app').innerHTML);
    }

    function showData(process, obj) {
        console.log(process);
        console.log('data 数据：' + obj.message)
        console.log('挂载的对象：')
        console.log(obj.$el)
        realDom();
        console.log('------------------')
        console.log('------------------')
    }
    //vm.message = "good...";
    //vm.$destroy();
</script>
</html>

最后的更新与销毁读者可以自己测试一下。不过要注意一下销毁后只是把Vue对象销毁了，但是数据已经展示到了页面，应该打印结果和没销毁前是一样的。

I am jack

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue生命周期测试

读懂这张图搞懂两个单词就好了：①render：渲染，指把要在浏览器显示的内容（也就是要挂载的内容）准备好。②mounted：挂载，指把准备好的要显示的内容显示出来。<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>vuejs生命周期</title> <script src="js/vuejs-2.5.16.js">&l.
复制链接

扫一扫