关于Vue实例的生命周期

最新推荐文章于 2021-01-26 09:02:39 发布

蚂蚁上的大象

最新推荐文章于 2021-01-26 09:02:39 发布

阅读量222

点赞数

文章标签： Vue.js

本文链接：https://blog.csdn.net/Jensen_Yao/article/details/84288651

版权

闲话不多说先上图：

下面用代码验证一下：

<!DOCTYPE html>
<html>
<head>
    <title>vue生命周期</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

<div id="app">
     <p>{{ message }}</p>
</div>

<script type="text/javascript">
    
  var app = new Vue({
        el: '#app', /** el 为 ELEMENT */
        data: {
            message : "vue生命周期测试" 
        },
        beforeCreate: function () {
            arter('beforeCreate 创建前状态==============> el 和 data 并未初始化 ');
        },
        created: function () {
            alert('created 创建完毕状态==============> 完成了 data 数据的初始化，el没有');
        },
        beforeMount: function () {
            alert('beforeMount 挂载前状态==============> 完成了 el 和 data 初始化， 虚拟Dom已经配置，但页面还未显示');
        },
        mounted: function () {
            alert('mounted 挂载结束状态==============> 完成挂载，页面显示');
        },
        beforeUpdate: function () {
            alert('beforeUpdate 更新前状态==============> 页面还未更新，但虚拟Dom已经配置');
        },
        updated: function () {
            alert('updated 更新完成状态==============>页面更新');
        },
        beforeDestroy: function () {
            alert('beforeDestroy vue销毁前状态');
        },
        destroyed: function () {
            alert('destroyed vue被销毁');
        }
    })
</script>
</body>
</html>

剩下就是实现你自己的方法了！