本文小编为大家详细介绍“Vue组件生命周期实例分析”，内容详细，步骤清晰，细节处理妥当，希望这篇“Vue组件生命周期实例分析”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
1. 组件的生命周期的四个阶段
组件的生命周期分为四个阶段：- create（创建）- mount（挂载）- update（更新）- destroy（销毁）2. 生命周期钩子函数
2.1 钩子函数定义
先看看官方的解释： 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
钩子函数到底是个啥意思呢？ 组件在加载的过程中，加载到某个阶段时，自动触发的函数
2.2 钩子函数理解与实例
beforeCreate 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用；如果在 beforeCreate 函数里面去访问 data 数据对象，是访问不到的
<body> <div id="app"> <input type="text" v-model="msg"> </div> <script> new Vue({ el:"#app", data:{ msg:'123' }, watch:{ msg:function(){ console.log("我变了"); } }, beforeCreate(){ console.log("创建组件data对象之前自动触发~~~"); console.log("beforeCreate",this.msg); } }) </script></body>结果：在 beforeCreate 函数中无法得到 msg 的值
2. created
在执行 created 函数前，已经有了数据对象 data，以及完成了事件的初始化，但$el 属性目前不可见；
在 created 函数里面可以使用数据，也可以更改数据；
调用 Vue 方法，可以获取原本 HTML 上的直接加载出来的 DOM，但是无法获取到通过挂载模板生成的 DOM（例如：v-for循环遍历 Vue.list 生成 li）
<body> <div id="app"> <input type="text" v-model="msg"> </div> <script> new Vue({ el:"#app", data:{ msg:'123' }, watch:{ msg:function(){ console.log("我变了"); } }, beforeCreate(){ console.log("创建组件data对象之前自动触发~~~"); console.log("beforeCreated",this.msg); }, created:function(){ console.log("创建组件data对象之后自动触发~~~"); this.msg=100000; console.log("created",this.msg); console.log("li数量：",document.getElementsByTagName("li").length); console.log("p数量：",document.getElementsByTagName("p").length); } }) </script>结果：在 created 函数中我们成功的拿到了、更改了 msg 的值。并且数据被更改后出发了watch 属性中的方法。 而且可以获取原本HTML 上的直接加载出来的 DOM（p 元素），但是无法获取到通过挂载模板生成的 DOM（例如：v-for 循环遍历 Vue.list 生成 li 元素）
注意：create阶段还没有创建虚拟dom
beforeMount
在挂载开始之前被调用，相关的（渲染函数）模板首次被调用。$el 属性可见。但此时在 beforeMount 函数中依然无法无法获取到通过挂载模板生成的DOM（例如：v-for 循环遍历 Vue.list 生成 li 元素）
在此函数之前都没有建立虚拟dom
beforeMount:function(){ console.log(this.$el); console.log("li数量：",document.getElementsByTagName("li").length); }mounted
执行完 beforeMount 函数后，$e l elel 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子函数。
这里才能获取初始数据list渲染出来的li
挂载后我们已经可以看见网页内容了，只不过还未操作
mounted:function(){ console.log(this.$el); console.log("li数量：",document.getElementsByTagName("li").length); }结果：同样的代码，放在 beforeMount 和 mounted 函数中结果完全不一样
在 update 阶段，虚拟 dom 监听数据变化，随时更新 dom
beforeUpdate 当数据发生变化的时候，beforeUpdate 这个钩子函数才会执行
updated 虚拟 dom 重新渲染后执行
beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用
destroyedVue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
<body> <div id="app"> <input type="text" v-model="msg"> <ul> <li v-for="(elem,index) of list" :key="index">{{elem}}</li> </ul> <p>p1</p> <p>p2</p> <p>p3</p> <h2>数量：{{count}}</h2> </div> <script> new Vue({ el:"#app", data:{ msg:'123', list:['a','b','c'], count:0 }, watch:{ msg:function(){ console.log("我变了"); } }, beforeCreate(){ console.log("创建组件data对象之前自动触发~~~"); console.log("beforeCreated",this.msg); }, created:function(){ console.log("创建组件data对象之后自动触发~~~"); this.msg=100000; console.log("created",this.msg); console.log("li数量：",document.getElementsByTagName("li").length); console.log("p数量：",document.getElementsByTagName("p").length); }, beforeMount:function(){ console.log(this.$el); console.log("li数量：",document.getElementsByTagName("li").length); }, mounted:function(){ console.log(this.$el); console.log("li数量：",document.getElementsByTagName("li").length); setInterval(()=>{ this.count++; },1000) }, beforeUpdate(){ console.log("更新组件的data变量前自动触发~~~") }, updated(){ console.log("更新组件的data变量后自动触发~~~"); if(this.count>3){ this.$destroy(); } }, beforeDestroy(){ console.log("销毁当前组件前自动触发~~~") }, destroyed(){ console.log("销毁组件后自动触发~~~"); } }) </script></body>读到这里，这篇“Vue组件生命周期实例分析”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网行业资讯频道。
