Vue 全部生命周期组件梳理整理
作者:??默默的成长???? 时间:2023-07-02 16:32:44
前言
今天继续加油学习,今天整理一下VUE中生命周期那有些,平且依次说明给个的使用场景以及作用。嘻嘻嘻,让我们一起学起来好吧
生命周期
beforeCreate: 在创建组件之前使用;在实例初始化之后,进行数据侦听和事件/ * 的配置之前同步调用。
beforeCreate:function(){
//组件创建之前
console.log(this)
}
created:在创建之后使用;
使用该组件,就会调用created方法,在created这个方法中可以操作后端的数据 数据驱动视图;
应用:发送ajax请求
created:function(){
console.log(this.msg)
},
beforeMount:挂载数据到DOM之前会调用
在挂载开始之前被调用:相关的 render
函数首次被调用。
该钩子在服务器端渲染期间不被调用。
beforeMount:function(){
console.log(document.getElementById('app'));
},
mounted:挂载数据到DOM之后会调用Vue作用之后的DOM 操作DOM
实例被挂载后调用,这时 el
被新创建的 vm.$el
替换了。如果根实例挂载到了一个文档内的元素上,当 mounted
被调用时 vm.$el
也在文档内。
mounted:function(){
console.log(document.getElementById('app'));
},
beforeUpdate:在更新DOM之前 调用该钩子 应用:可以获取原始的DOM
在数据发生改变后,DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它,比如移除手动添加的事件 * 。
该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务器端进行。
beforeUpdate:function(){
//在更新DOM之前 调用该钩子 应用:可以获取原始的DOM
console.log(document.getElementById('app').innerHTML);
},
updated:在更新DOM之后 调用该钩子 应用:可以获取最新的DOM
在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher取而代之。
updated:function(){
console.log(document.getElementById('app').innerHTML);
},
beforeDestroy:
实例销毁之前调用。在这一步,实例仍然完全可用。
该钩子在服务器端渲染期间不被调用。
beforeDestroy:function(){
console.log('beforeDestroy')
},
destroyed:
实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件 * 被移除,所有的子实例也都被销毁。
该钩子在服务器端渲染期间不被调用。
destroyed:function(){
console.log('destroyed')
},
activated: 用于组件激活的功能
activated:function(){
console.log('组件被激活了')
},
deactivated:用于组件被停用
deactivated:function(){
console.log('组件被停用了')
}
来源:https://juejin.cn/post/7112317808611950606
标签:Vue,生命,周期,组件
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Windows版mysql 8.0.28 安装配置方法图文教程
2024-01-16 08:30:17
![](https://img.aspxhome.com/file/2023/9/128059_0s.png)
python实现dnspod自动更新dns解析的方法
2021-10-24 14:19:47
Python实现远程调用MetaSploit的方法
2022-07-17 05:40:31
SQL Server修改标识列方法 如自增列的批量化修改
2012-06-06 19:42:35
python多进程下实现日志记录按时间分割
2022-10-07 21:00:24
Python内置函数—vars的具体使用方法
2021-05-07 04:09:57
Firefox window.close()的使用注意事项
2024-04-17 10:11:12
Tornado高并发处理方法实例代码
2022-10-13 15:30:07
解决Keras 中加入lambda层无法正常载入模型问题
2022-02-21 03:41:11
mysql中update按照多重条件进行更新处理的方案
2024-01-22 05:14:59
![](https://img.aspxhome.com/file/2023/3/107433_0s.png)
深度理解Python中Class类、Object类、Type元类
2022-07-14 03:10:13
![](https://img.aspxhome.com/file/2023/9/105059_0s.png)
使用python对泰坦尼克号幸存者进行数据分析与预测
2022-09-07 09:29:42
![](https://img.aspxhome.com/file/2023/6/131726_0s.png)
使用Tkinter制作信息提示框
2023-12-15 02:13:30
![](https://img.aspxhome.com/file/2023/0/121070_0s.jpg)
Python制作进度条的几种方法
2022-03-11 05:36:23
![](https://img.aspxhome.com/file/2023/5/117625_0s.jpg)
Python 代码实现各种酷炫功能
2022-12-24 10:40:16
![](https://img.aspxhome.com/file/2023/3/134723_0s.png)
简单了解Django应用app及分布式路由
2023-08-30 19:29:47
![](https://img.aspxhome.com/file/2023/8/121888_0s.png)
利用XMLHTTP无刷新自动实时更新数据
2008-02-19 18:29:00
Python中的枚举函数enumerate()的具体用法
2022-06-03 13:33:31
![](https://img.aspxhome.com/file/2023/3/120603_0s.png)
学习JavaScript设计模式之中介者模式
2024-04-17 10:07:57
深度学习入门之Pytorch 数据增强的实现
2021-04-05 22:26:07
![](https://img.aspxhome.com/file/2023/0/87810_0s.jpg)