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
投稿
猜你喜欢
- 导语带大家写个冷笑话生成器吧,感觉蛮有意思的。废话不多说,让我们愉快地开始吧~开发工具Python版本:3.7.8相关模块:pyqt5模块;
- 当列表菜单项目特别多的时候,使用JavaScript手风琴菜单(Accordion Menus)是个不错的选择。手风琴折叠菜单利于组织菜单项
- 1. 日志输出到屏幕#!/usr/bin/env python# -*- coding: utf-8 -*-from __future__
- 前言在编程开发中,个人觉得,只要按照规范去做,很少会出问题。刚开始学习一门技术时,的确会遇到很多的坑。踩的坑多了,这是好事,会学到更多东西,
- 本文为大家分享了Python遗传算法解决最大流问题,供大家参考,具体内容如下Generate_matrixdef Generate_matr
- 前言:在涉及商品类的项目时,为了给同一类商品定位,往往会分等级或者成色。而等级/成色有时是用类似A,A+,A+1,K,L1,L2等英文与数字
- 本文实例讲述了Python redis操作。分享给大家供大家参考,具体如下:一、redisredis是一个key-value存储系统。和Me
- 大家都知道,Dreamweaver是是一款专业的网页设计工具,提供了许多方便、实用的功能,使得以前许多网页效果的实现从繁琐的代码
- Oracle分页查询的实例详解1.Oracle分页查询:SELECT * FROM ( SELECT A.*, ROWNUM RN FROM
- 本文实例讲述了Python使用chardet判断字符编码的方法。分享给大家供大家参考。具体分析如下:Python中chardet 用来实现字
- 本文实例总结了JavaScript数组去重的方法。分享给大家供大家参考,具体如下:数组去重,一般都是在面试的时候才会碰到,一般是要求手写数组
- 概述迁移学习 (Transfer Learning) 是把已学训练好的模型参数用作新训练模型的起始参数. 迁移学习是深度学习中非常重要和常用
- 很多Python学习者想必都会有如下感悟:最开始学习Python的时候,因为没有去探索好用的工具,吃了很多苦头。后来工作中深刻体会到,合理使
- 偶然发现linux系统附带的一个数独游戏,打开玩了几把。无奈是个数独菜鸟,以前没玩过,根本就走不出几步就一团浆糊了。于是就打算借助计算机的强
- MySQL是一种开放源代码的关系型数据库管理系统(RDBMS),MySQL数据库系统使用最常用的数据库管理语言--结构化查询语言(SQL)进
- 目录一、socketserver实现并发二、验证客户端合法性一、socketserver实现并发tcp协议的socket是只能和一个客户端通
- 微信更新后出来了一块比较火的小游戏,要是一款不涉及到排行的游戏,可能 没人去关注这款游戏。最开自己一直苦练技术,想在微信排行上面装一装,练了
- 前言在诸多的管理类,办公类等系统中,树形结构展示随处可见,以“部门”或"机构"来说,接触过的同学应该都知道,最终展示到页
- 1.在pycharm下安装scrapy函数库2.将安装好scrapy函数库下的路径配置到系统path的环境变量中3.打开cmd终端输入:sc
- 在昨天的文章,《 block 和 inline 的区别是?》里,我给大家留了个问题——LI 元素到底是block level 的,还是 in