vue学习笔记(二) ---- vue实例的生命周期
vue实例的生命周期
- 什么是生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期!
- 生命周期钩子:就是生命周期事件的别名而已;
- 生命周期钩子 = 生命周期函数 = 生命周期事件
- 主要的生命周期函数分类:
- 创建期间的生命周期函数:
beforeCreate() {这是我们遇到的第一个生命周期函数,表示实例完全被创建出来之前,会执行它
注意: 在 beforeCreate 生命周期函数执行的时候,data 和 methods 中的 数据都还没有没初始化
},
created() { 这是遇到的第二个生命周期函数
在 created 中,data 和 methods 都已经被初始化好了!
如果要调用 methods 中的方法,或者操作 data 中的数据,最早,只能在 created 中操作
},
beforeMount() { // 这是遇到的第3个生命周期函数,表示 模板已经在内存中编辑完成了,但是尚未把 模板渲染到 页面中
在 beforeMount 执行的时候,页面中的元素,还没有被真正替换过来,只是之前写的一些模板字符串
},
mounted() { 这是遇到的第4个生命周期函数,表示,内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了
注意: mounted 是 实例创建期间的最后一个生命周期函数,当执行完 mounted 就表示,实例已经被完全创建好了,此时,如果没有其它操作的话,这个实例,就静静的 躺在我们的内存中,一动不动
},
接下来的是运行中的两个事件
beforeUpdate() { // 这时候,表示 我们的界面还没有被更新【数据被更新了吗? 数据肯定被更新了】
得出结论: 当执行 beforeUpdate 的时候,页面中的显示的数据,还是旧的,此时 data 数据是最新的,页面尚未和 最新的数据保持同步
},
updated() {
updated 事件执行的时候,页面和 data 数据已经保持同步了,都是最新的
}
- 销毁期间的生命周期函数:
beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
生命周期图解:
vue学习笔记(二) ---- vue实例的生命周期的更多相关文章
- vue学习笔记(二)vue的生命周期和钩子函数
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
- VUE 学习笔记 二 生命周期
1.除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来 var data = { a: 1 } var vm = new Vue({ el: ' ...
- 【Vue学习笔记】—— vue的基础语法 { }
学习笔记 作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...
- vue学习笔记:vue的认识与特点与获取
Vue了解 Vue:读作 view Vue是一个渐进式框架 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...
- maven权威指南学习笔记(四)—— maven生命周期(lifecycle)
定义: 生命周期是包含在一个项目构建中的一系列有序的阶段 举个例子来说就是maven 对一个工程进行: 验证(validate) -- 编译源码(compile) -- 编译测试源码(test-com ...
- (转)《深入理解java虚拟机》学习笔记7——Java虚拟机类生命周期
C/C++等纯编译语言从源码到最终执行一般要经历:编译.连接和运行三个阶段,连接是在编译期间完成,而java在编译期间仅仅是将源码编译为Java虚拟机可以识别的字节码Class类文件,Java虚拟机对 ...
- Android(java)学习笔记170:Activity的生命周期
1.首先来一张生命周期的总图: onCreate():创建Acitivity界面 onStart():让上面创建的界面可见 onResume():让上面创建的界面 ...
- Spring4.0学习笔记(5) —— 管理bean的生命周期
Spring IOC 容器可以管理Bean的生命周期,Spring允许在Bean生命周期的特定点执行定制的任务 Spring IOC 容器对Bean的生命周期进行管理的过程: 1.通过构造器或工厂方法 ...
- React 入门学习笔记整理(七)—— 生命周期
(1)react 生命周期 只有类组件有生命周期,函数组件没有生命周期 1.挂载阶段:这些方法会在组件实例被创建和插入DOM中时被调用: 1)constructor(props) 初始化组件的状态.绑 ...
- Servlet学习笔记(一):生命周期
一.Servlet 生命周期: Servlet 生命周期可被定义为从创建直到毁灭的整个过程.以下是 Servlet 遵循的过程:初始化——响应请求——终止——回收 Servlet 通过调用 init ...
随机推荐
- Python基础之函数:5、内置函数、迭代器对象、异常的捕获和处理
目录 一.重要内置函数 1.zip() 2.filter() 3.sorted() 二.常见内置函数 1. abs() 2.all.any() 3.bin.oct.hex.int() 4.bytes( ...
- clang在编译时指定目标文件所需的最低macOS版本
调研这个的原因,是因为有个同事在macOS 12.2上打包好的程序,放在macOS 10.15上运行时报错: Dyld Error Message: Symbol not found: __ZNKS ...
- VP记录
预计在最后的日子里适量VP 简单记录一下 CF 1037 Link 上来秒了ABCD,很快啊 A是二进制拆分,B是一眼贪心,C是一个非常简单且好写的dp D把边遍历顺序按照所需的bfs顺序排序,最后比 ...
- Apache ShenYu 集成 RocketMQ 实时采集海量日志的实践
本文作者:胡泰室, 快手Java开发工程师. 认识Apache ShenYu(神禹) 网关最重要的是流量治理,而流量治理与大禹治水有很多相似的地方,因此,网关的流量治理项目被命名为神禹. Shen ...
- windows10熄屏断网问题解决
以前用windowsserver的操作系统可以随时随地的远程,最近因工作需要安装了一个windows10的远程设备,发现windows10系统长时间未使用便连不上了,远程不了,ping不通,本地连接断 ...
- 聊一聊如何截获 C# 程序产生的日志
一:背景 1.讲故事 前段时间分析了一个dump,一顿操作之后,我希望用外力来阻止程序内部对某一个com组件的调用,对,就是想借助外力实现,如果用 windbg 的话,可以说非常轻松,但现实情况比较复 ...
- 下载安装MinGW-w64详细步骤
一.MinGW-w64介绍 MinGW 的全称是:Minimalist GNU on Windows ,实际上是将gcc(c/c++编译器)移植到了 Windows 平台下,并且包含了 Win32AP ...
- odoo关于计算字段store=True时导致的安装/更新时间较长问题的解决方案
Odoo安装/更新模块原理 Odoo每次安装/更新模块时,会进行以下几步处理: 1.判断是否需要创建表,如果需要创建且表不存在,则进行表的创建(不进行字段的创建): 2.获取该表中已经存在的字段: 3 ...
- 云原生 • Kubernetes 认识 k8s、k8s 架构、核心概念点介绍
云原生 • Kubernetes 认识 k8s.k8s 架构.核心概念点介绍 一.Kubernetes 简介Kubernetes 简称 k8s,是支持云原生部署的一个平台,起源于谷歌.谷歌早在十几年之 ...
- ATM项目
ATM项目实战 项目需求分析: 1.注册(密码要加密) 2.登陆 3.查看余额 4.提现(可自定手续费) 5.还款 6.转账 7.查看流水 8.添加购物车功能 (商品可配置) 9.查看购物车功能 10 ...