VueJS生命周期

cwl_java

发布于 2019-12-25 11:33:48

7160

文章被收录于专栏：cwl_Javacwl_Java

每个 Vue 实例在被创建之前都要经过一系列的初始化过程.

vue在生命周期中有这些状态:

before Create,
created,
before Mount,
mounted,
before Update,
updated,
before Destroy,
destroyed。

Vue在实例化的过程中，会调用这些生命周期的钩子，给我们提供了执行自定义逻辑的机会。那么，在这些vue钩子中，vue实例到底执行了那些操作，我们先看下面执行的例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>生命周期</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app"> {{message}}</div>
<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>
</body>
</html>

vue对象初始化过程中，会执行到before Create,created,before Mount,mounted 这几个钩子的内容

before Create ：数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象
created ：数据已经绑定到了对象实例，但是还没有挂载对象
before Mount: 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的el属性，el属性是一个HTML Element对象，也就是这个阶段，vue实例通过原生的create Element等方法来创建这个html片段，准备注入到我们vue实例指明的el属性所对应的挂载点
mounted:将el的内容挂载到了el，相当于我们在jquery执行了(el).html(el),生成页面上真正的dom，上面我们就会发现dom的元素和我们el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并进行各种操作当我们的data发生改变时，会调用before Update和updated方法
before Update ：数据更新到 dom 之前，我们可以看到 $el 对象已经修改，但是我们页面上dom的数据还没有发生改变
updated: dom结构会通过虚拟dom的原则，找到需要更新页面dom结构的最小路径，将改变更新到dom上面，完成更新
before Destroy,destroed :实例的销毁，vue实例还是存在的，只是解绑了事件的监听还有watcher对象数据与view的绑定，即数据驱动

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

vue.js

登录后参与评论

0 条评论

热度

VueJS生命周期

VueJS生命周期

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐