导航：首页 > 开发技术 >

Vue组件生命周期实例分析

发表于：2024-11-28 作者：千家信息网编辑

千家信息网最后更新 2024年11月28日，本文小编为大家详细介绍"Vue组件生命周期实例分析"，内容详细，步骤清晰，细节处理妥当，希望这篇"Vue组件生命周期实例分析"文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。1

千家信息网最后更新 2024年11月28日Vue组件生命周期实例分析

本文小编为大家详细介绍"Vue组件生命周期实例分析"，内容详细，步骤清晰，细节处理妥当，希望这篇"Vue组件生命周期实例分析"文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

1. 组件的生命周期的四个阶段

组件的生命周期分为四个阶段：- create（创建）- mount（挂载）- update（更新）- destroy（销毁）

先看看官方的解释：每个 Vue 实例在被创建时都要经过一系列的初始化过程--例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
钩子函数到底是个啥意思呢？组件在加载的过程中，加载到某个阶段时，自动触发的函数

1. beforeCreate 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用；如果在 beforeCreate 函数里面去访问 data 数据对象，是访问不到的

结果：在 beforeCreate 函数中无法得到 msg 的值

2. created

在执行 created 函数前，已经有了数据对象 data，以及完成了事件的初始化，但$el 属性目前不可见；
在 created 函数里面可以使用数据，也可以更改数据；
调用 Vue 方法，可以获取原本 HTML 上的直接加载出来的 DOM，但是无法获取到通过挂载模板生成的 DOM（例如：v-for循环遍历 Vue.list 生成 li）

结果：在 created 函数中我们成功的拿到了、更改了 msg 的值。并且数据被更改后出发了watch 属性中的方法。而且可以获取原本HTML 上的直接加载出来的 DOM（p 元素），但是无法获取到通过挂载模板生成的 DOM（例如：v-for 循环遍历 Vue.list 生成 li 元素）

注意：create阶段还没有创建虚拟dom

3.beforeMount

在挂载开始之前被调用，相关的（渲染函数）模板首次被调用。$el 属性可见。但此时在 beforeMount 函数中依然无法无法获取到通过挂载模板生成的DOM（例如：v-for 循环遍历 Vue.list 生成 li 元素）
在此函数之前都没有建立虚拟dom

beforeMount:function(){        console.log(this.$el);        console.log("li数量：",document.getElementsByTagName("li").length);      }

4.mounted

mounted:function(){        console.log(this.$el);        console.log("li数量：",document.getElementsByTagName("li").length);      }

结果：同样的代码，放在 beforeMount 和 mounted 函数中结果完全不一样

在 update 阶段，虚拟 dom 监听数据变化，随时更新 dom

5. beforeUpdate 当数据发生变化的时候，beforeUpdate 这个钩子函数才会执行

6. updated 虚拟 dom 重新渲染后执行

7.beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用

8.destroyedVue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

                {{elem}}
    
    p1
    p2
    p3
    数量：{{count}}

读到这里，这篇"Vue组件生命周期实例分析"文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注行业资讯频道。