Vue 全部生命周期组件梳理整理
作者:??默默的成长???? 发布时间:2023-07-02 16:32:44
标签:Vue,生命,周期,组件
前言
今天继续加油学习,今天整理一下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
0
投稿
猜你喜欢
- 如下所示:import pymysqlimport timeimport redef get_raw_label(rece): re1 =
- conn.execute、rs.open之间的差别,conn.execute、rs.open、command.execute方法用法大大不同
- 安装模块下面需要用模块,先安装一下:pip install numpy pip install opencv-python==4.5.5.6
- 前言前言:想写这个代码的原因是因为实习的时候需要根据表格名创建对应的文件夹,如果只是很少个数文件夹的话,ctrl+shift+n还可以接受吧
- 使用标准库importlib的import_module()函数、django的import_string(),它们都可以动态加载指定的 P
- 普通关闭我的mysql是自己下载的tar包,自己设定安装目录来安装的。停止mysql服务,说来简单,但不知道的话,还真是挠头。在这和mysq
- 我们已经在Python运算中看到Python最基本的数学运算功能。此外,math包补充了更多的函数。当然,如果想要更加高级的数学功能,可以考
- 1.安装vscode和python3.7(安装路径在:E:\Python\Python37);2.打开vscode,在左下角点击设置图标选择
- Python 爬虫包含两个重要的部分:正则表达式和Scrapy框架的运用, 正则表达式对于所有语言都是通用的,网络上可以找到各种资源。如下是
- plt.title() 是 matplotlib 库中用于设置图形标题的函数。一、基本语法如下plt.title(label, fontdi
- 测试方法首先使用implode, serialize, json_encode, msgpack_pack创建四个文本文件,用于测试。创建代
- 人工智能有多火,相信铺天盖地的新闻已经证实了这一点,不可否认,我们已经迎来了人工智能的又一次高潮。与前几次人工智能的飞跃相比,这一次人工智能
- 由于系统自带的MySQL默认字符集不是gbk,因此给数据库的推广应用以及中文程序的开发带来极大的不便,在没完没了的GBK和UTF8的转换过程
- YAHOO.util.Subscriber 与 YAHOO.util.CustomEvent。1. YAHOO
- 在python命令行模式下,在IDLE中输入多行,例如if else使用tab的方式,控制缩进在最后,连续两个回车,表示结束&g
- 2016年9月22日凌晨,微信宣布“小程序”问世,妈的,论坛,博客全是小程序,昨天当之无愧抢了头条,当然只是开始内测了,微信公众平台对200
- 常用的标准库序列化模块import pickle序列化和反序列化把不能直接存储的数据变得可存储,这个过程叫做序列化。把文件中的数据拿出来,回
- vue3挂载并使用axios首先在main.js中引入axios并挂载到app.config.globalProperties上axios配
- PyMySQL介绍PyMySQL 是在 Python3.x 版本中用于连接 MySQL 服务器的一个库,Python2中则使用mysqldb
- 从一个问题开始最近银行这个事情闹的比较厉害啊,很多储户的钱放在银行,就不翼而飞了,而银行还不管不问,说是用户的责任,打官司,用户还能输了,这