【VueJS】Vue的生命周期（钩子函数）

柔光的暖阳◎ 2022-06-02 04:54 280阅读 0赞

环境：Vue2.x版本

在Vue的官网有一张图已经很好的诠释了生命周期，我在这里就不再多讲了，直接贴图，然后上程序代码。

![这里写图片描述][SouthEast]

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <div id="app"> { { count}} <p><button @click="add">加分</button></p> </div> <button onclick="app.$destroy()">销毁</button> <script type="text/javascript"> var app=new Vue({ el:'#app', data:{ count:1 }, methods:{ add:function(){ this.count ++; } }, beforeCreate:function(){ console.log('1-beforeCreate 初始化之后'); }, created:function(){ console.log('2-created 创建完成'); }, beforeMount:function(){ console.log('3-beforeMount 挂载之前'); }, mounted:function(){ console.log('4-mounted 被创建'); }, beforeUpdate:function(){ console.log('5-beforeUpdate 数据更新前'); }, updated:function(){ console.log('6-updated 被更新后'); }, activated:function(){ console.log('7-activated'); }, deactivated:function(){ console.log('8-deactivated'); }, beforeDestroy:function(){ console.log('9-beforeDestroy 销毁之前'); }, destroyed:function(){ console.log('10-destroyed 销毁之后') } }) </script>

![这里写图片描述][SouthEast 1]

> activated  
> 　　keep-alive组件激活时调用。  
> 　　该钩子在服务器端渲染期间不被调用。  
> deactivated  
> 　　keep-alive组件停用时调用。  
> 　　该钩子在服务端渲染期间不被调用。

[SouthEast]: /images/20220602/ebf3bda5081c495883871830de22b668.png
[SouthEast 1]: /images/20220602/a85c619a96da4f018fd5a161d5f1301a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，280人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue的生命周期（钩子）函数

> BeforeCreate 创建前 > > Created 创建后 > > BeforeMount 挂载前 > > Mounted 挂载完成 > > BeforeUp

男娘i/ 2023年10月09日 18:49/ 0 赞/ 83 阅读

相关生命周期和钩子函数

生命周期和钩子函数图示详解实例图示 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sh

电玩女神/ 2023年10月05日 13:22/ 0 赞/ 28 阅读

相关 vue生命周期和钩子函数

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

r囧r小猫/ 2022年12月12日 15:22/ 0 赞/ 235 阅读

相关小程序生命周期钩子函数

更多详情参考：[https://www.cnblogs.com/fozero/p/7868560.html][https_www.cnblogs.com_fozero_p_78

Dear 丶/ 2022年12月10日 07:17/ 0 赞/ 280 阅读

相关 Vue生命周期的钩子函数

Vue生命周期的钩子函数目录 Vue生命周期的钩子函数一、前言二、生命周期图示三、钩子函数增加log

雨点打透心脏的1/2处/ 2022年10月26日 14:18/ 0 赞/ 328 阅读

相关 angular 生命周期钩子函数

生命周期执行顺序 1.ngOnChanges 在有输入属性的情况下才会调用，该方法接受当前和上一属性值的SimpleChanges对象。如果有输入属性，会在ngOnIni

喜欢ヅ旅行/ 2022年03月19日 04:48/ 0 赞/ 356 阅读

相关 React的生命周期钩子函数

一、React的生命周期钩子函数旧版 1. 挂载时，初始化阶段 1）`constructor()` : 如果不初始化state或不进行方法绑定，则不需要为rea

灰太狼/ 2021年11月01日 10:38/ 0 赞/ 509 阅读

相关生命周期（钩子函数）

生命周期（钩子函数）一、生命周期过程解释 > 实例创建之后，初始化事件和生命周期，而后触发beforeCreate。beforeCreate，当前实例创建之前

Bertha 。/ 2021年09月15日 14:50/ 0 赞/ 479 阅读

相关 Vue生命周期钩子函数

Vue生命周期：Vue实例从创建到销毁的过程，称为Vue的生命周期； Vue生命周期示意图：[点击前往][Link 1] Vue钩子函数官方文档：[点击前往][Link 2

矫情吗；*/ 2021年07月25日 15:39/ 0 赞/ 591 阅读

相关 Vue生命周期钩子函数

一点睛 1 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个

小灰灰/ 2021年07月24日 21:58/ 0 赞/ 561 阅读