Vue实例中生命周期created和mounted的区别详解
作者:安小下 发布时间:2024-04-29 13:08:15
前言
本文主要跟大家介绍了关于Vue实例中生命周期created和mounted区别的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。
生命周期先上图
什么是生命周期
Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。
在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注册的js方法控制整个大局,在这些事件响应方法中的this直接指向的是vue的实例。
再上图,对生命周期图的标注
特别值得注意的是created钩子函数和mounted钩子函数的区别
每个钩子函数都在啥时间触发
beforeCreate
在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created
实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
beforeMount
在挂载开始之前被调用:相关的 render 函数首次被调用。
mounted
el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。
beforeUpdate
数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。
该钩子在服务器端渲染期间不被调用。
beforeDestroy
实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed
Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件 * 会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
来源:https://segmentfault.com/a/1190000008570622


猜你喜欢
- Windows下的分隔符默认的是逗号,而MAC的分隔符是分号。拿到一份用分号分割的CSV文件,在Win下是无法正确读取的,因为CSV模块默认
- K折交叉交叉验证的过程如下以200条数据,十折交叉验证为例子,十折也就是将数据分成10组,进行10组训练,每组用于测试的数据为:数据总条数/
- 摘要:主要是讲解一些数据挖掘中频繁模式挖掘的Apriori算法原理应用实践当我们买东西的时候,我们会发现物品展示方式是不同,购物以后优惠券以
- 首先我们有一个数据是一个mn的numpy矩阵现在我们希望能够进行给他加上一列变成一个m(n+1)的矩阵import numpy as npa
- Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星,足以说明其以悄然成为主流。16年10月Vue发布了2.x版本,经
- 微信小程序中的云开发想必大家还不是很熟悉,因为云开发也就是9月份上线的,相比之前大家对于数据库的存储都是用的是自己的服务器,接下来这篇文章主
- 有时在浏览网页时,常常因为网页中的图片文件过大而使下载时间较长,这样还没有下载完,就会有许多浏览者不耐烦地拂袖而去,从而损失了客户流。但要使
- 一、数据库编程的必备条件编程语言: 如Java、C++、C、Python等数据库: 如Oracle、MySQL、SQL Server等数据库
- CSS+DIV是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为
- 本文实例讲述了python中pass语句用法。分享给大家供大家参考。具体分析如下:1、空语句 do nothing2、保证格式完整3、保证语
- 本文实例讲述了PHP对象克隆clone用法。分享给大家供大家参考,具体如下:浅克隆:只是克隆对象中的非对象非资源数据,即对象中属性存储的是对
- MNIST 数据集介绍MNIST 包含 0~9 的手写数字, 共有 60000 个训练集和 10000 个测试集. 数据的格式为单通道 28
- 在最新版的pandas中(不知道之前的版本有没有这个问题),当我们对具有多层次索引的对象做切片或者通过df[bool_list]的方式索引的
- 本人非计算机,亦非心理学,或者交互设计,更非设计专业出身,因此什么都是半桶水。即使如此,依然靠着兴趣寻找乐趣。对于设计,爱之,但没有受过系统
- 在MySQL数据库中导出整个数据库:1.导出整个数据库mysqldump -u 用户名 -p 数据库名 > 导出的文件名mysqldu
- 一、导言导语:在计算机进行数据交换时,常常会有一个进制转换的过程,我们知道计算机只认0 和 1.在内存系统中,基本基于二进制进行运算的,但是
- 目录1 简介2 在Dash中实现文件上传与下载2.1 在Dash中配合dash-uploader实现文件上传2.1.1
- 定义及路由机制定义在settings里面的DATABASES是一个字典,用于定义需要的数据库,如下,一共定义了两个数据库。DATABASES
- 本文实例讲述了Python基于回溯法子集树模板解决马踏棋盘问题。分享给大家供大家参考,具体如下:问题将马放到国际象棋的8*8棋盘board上
- 本文实例讲述了Django基于ORM操作数据库的方法。分享给大家供大家参考,具体如下:1、配置数据库vim settings #HelloW