vue实例的生命周期

最新推荐文章于 2022-06-26 22:58:50 发布

转载最新推荐文章于 2022-06-26 22:58:50 发布 · 100 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c0f9d545188252b547c4c66

文章标签：

#javascript #ViewUI

本文深入探讨Vue.js框架的核心特性，包括其声明式渲染机制和详细的生命周期流程。从实例创建到销毁，Vue通过一系列钩子函数提供对关键阶段的控制，使开发者能更好地理解和管理应用程序的状态变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue

是一套用于构建用户界面的渐进式框架。与其他框架不同的是，vue被设计为可以自底向上的逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

声明式渲染

Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统：

<div id='app'>{{ msg }}</div>

var app = new Vuew({
    el: '#app',
    data:{
        msg:'Hello Vue!'
    }
})
复制代码

Vue实例的生命周期

每个Vue实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测（data observer）、编译模板、挂载实例到DOM，然后在数据变化时更新DOM。下图展示的就是一个vue实例对象的生命周期。

Vue在生命周期中的状态有：

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

Vue在实例化的过程中，会调用这些生命周期的钩子，提供了执行自定义逻辑的机会。在这些vue钩子中，vue实例执行了以下操作：

var vm = new Vue({
    el: "#container",
    data: {
        test : '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('container').innerHTML);
}
function showData(process,obj){
    console.log(process);
     console.log('data 数据：' + obj.test)
     console.log('挂载的对象：')
     console.log(obj.$el)
     realDom();
     console.log('------------------')
     console.log('------------------')
}
复制代码

vue对象初始化过程中，会执行到beforeCreate，create吗，beforeMount，mounted这几个钩子的内容 beforeCreate：数据还没有监听，还没有绑到vue对象实例，同时也没有挂载对象 created：数据已经绑定到对象实例，但是还没有挂载对象 beforeMount：模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的 el属性， el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创建这个HTML片段，准备注入我们vue实例指明的el属性对应的挂载点 mounted：将 el的内容挂载到了el，相当于我们在jQuery执行了 (el).html( el),生成页面上真正的demo，上面我们就会发现demo的元素和我们的 el元素是一致的。在此之后，我们就能够用方法来获取到el元素下的dom对象，并进行各种操作