03-Vue技术栈之生命周期
目录
- 1、什么是生命周期
- 2、分析生命周期
- 2.1 生命周期钩子函数
- 2.2 生命周期钩子函数的作用
- 2.3 生命周期钩子函数图例
- 2.4 生命周期钩子函数的应用
- 3、生命周期总结
- 4、补充:其他的三个生命周期钩子
1、什么是生命周期
- 又名:
生命周期回调函数
、生命周期函数
、生命周期钩子
。 - 是什么:Vue在关键时刻帮我们调用的一些
特殊名称的函数
。 - 生命周期函数的名字
不可更
改,但函数的具体内容是程序员根据需求编写的
。 - 生命周期函数中的
this指向
是vm
或组件实例对象
。
2、分析生命周期
2.1 生命周期钩子函数
- 每个Vue实例在创建时都要经过一系列的初始化过程。例如,需要设置
数据侦听
、编译些生命周期钩子函数
,给用户在不同阶段添加代码的机会。
2.2 生命周期钩子函数的作用
- 有一些其他钩子,在实例生命周期的不同阶段被调用,如
mounted
,updated
和destroyed
。 - 生命周期钩子的
this关键字
上下文指向调用它的Vue 实例
,调用方法如this.$e
l。
注:不能使用
箭头函数(()=>)
定义一个生命周期方法,如created:()=> this.fetchTodos()
。
这是因为箭头函数绑定了父上下文,因此 this与期待的Vue实例不同,this.fechTodos()的行为未定义。
2.3 生命周期钩子函数图例
基本语法:
beforeCreate() {console.log('beforeCreate')},created() {console.log('created')},beforeMount() {console.log('beforeMount')},mounted() {console.log('mounted')},beforeUpdate() {console.log('beforeUpdate')},updated() {console.log('updated')},beforeDestroy() {console.log('beforeDestroy')},destroyed() {console.log('destroyed')}
语法说明:
Vue 实例有一个完整的生命周期,即 Vue 实例从创建到销毁的过程。具体可细分为开始 创建、初始化数据、编译模板、挂载 DOM 渲染、更新渲染、卸载等一系列过程,称为 Vue 的生命周期。在 Vue 的整个生命周期中,提供了一些生命周期钩子函数,为执行自定义逻辑 提供了机会。
beforeCreate
:在实例初始化之后,数据观测和 event/watch 事件配置之前被调用。created
:实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测、属性和方法的运算、event/watch
事件回调。然而,挂载阶段还没有开始,$el 属性目前不可见。beforeMount
:在挂载开始之前被调用,相关的渲染函数首次被调用。在此阶段,它检查是否有任何模板可用于要在 DOM
中呈现的对象:如果没有找到模板,那么将所定义元素的外部 HTML 视为模板。mounted
:el 被新创建的vm. $el
替换,并挂载到实例上,之后调用该钩子。一旦模板准备就绪,它将数据放入模板并创建可呈现元素。beforeUpdate
:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。可以在此钩子中进一步更改状态,不会触发附加的重渲染过程。updated
:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在此之后调用该钩子。通过实际更新 DOM 对象并触发updated 钩子,屏幕上的变化得到呈现。beforeDestroy
:实例销毁之前调用。在这一步,实例仍然完全可用。在 Vue 对象被破坏并从内存中释放之前,beforeDestroy 钩子被触发,并允许在其中处理自定义代码。destroyed
:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑,所有事件侦听器会被移除,所有子实例也会被销毁。该钩子在服务器端渲染期间不被调用。 可以使用生命周期钩子函数在 Vue对象生命周期的不同阶段添加自定义代码。它将帮助 设计人员控制在 DOM 中创建对象的流程,以及更新和删除对象。完整生命周期钩子函数调用关系如下图所示:
2.4 生命周期钩子函数的应用
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head><body><div id="root"><h3>{{information}}</h3><button @click="changeInformation">改变信息</button><button @click="destroyVM">销毁Vue实例</button></div><script>new Vue({el: '#root',data() {return {information: '东方青云欢迎您'}},methods: {changeInformation() {this.information = '我来了,您在哪里?'},destroyVM() {this.$destroy()//销毁Vue实例}},beforeCreate() {console.log('=====beforeCreate=====')console.log('el:' + this.$el)//未定义console.log("data:" + this.$data)//未定义console.log('=====beforeCreate=====')},created() {console.log('====created=====');console.log('el:' + this.$el)//未定义console.log("data:" + this.$data)//已被初始化为[object Object]console.log("information:" + this.information);//information:东方青云欢迎您console.log('====created=====');},beforeMount() {console.log('====beforeMount====');console.log('el:' + this.$el);//el:[object HTMLDivElement]console.log(this.$el);//当前挂载元素document.querySelector('h3').innerText = '1'//无效,虚拟dom},mounted() {// document.querySelector('h3').innerText = '1'//有效,已转化为真实dom},beforeUpdate() {console.log('====beforeUpdate====');console.log(this.information);// debugger;//断点调试},updated() {console.log(this.information);},beforeDestroy() {console.log('我要被销毁了');},destroyed() {console.log('销毁完毕');},})</script>
</body></html>
3、生命周期总结
常用的生命周期钩子:
mounted
: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。beforeDestroy
: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
关于销毁Vue实例:
3. 销毁后借助Vue开发者工具看不到任何信息。
4. 销毁后自定义事件会失效
,但原生DOM事件依然有效
。
5. 一般不会在beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程
了。
4、补充:其他的三个生命周期钩子
具体名字:
activated
路由组件被激活时触发。deactivated
路由组件失活时触发
作用:
路由组件所独有的两个钩子,用于捕获路由组件的激活状态
。
nextTick
语法:
this.$nextTick(回调函数)
作用:
在下一次 DOM 更新结束后执行其指定的回调。
使用时机:
当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行
。
注:这11个生命周期钩子都是Vue2里面的。
03-Vue技术栈之生命周期相关推荐
- Lison《vue技术栈开发实战》(四)
Lison<vue技术栈开发实战>(四) 从SplitPane组件谈Vue中"操作"DOM 简单两列布局 如何让两个div改变宽度 鼠标拖动效果 v-model和.sy ...
- vue笔记一:Vue技术栈
目录 vue笔记一:Vue技术栈 1.node.js 2. npm 3.ES6 4.Babel 5.项目构建工具vue-cli 6.路由vue-router 7.状态管理vuex 8.http请求⼯具 ...
- 高级前端软件工程师知识整理之Vue技术栈篇
1. 什么是MVVM? MVVM是Model-View-ViewModel的简写,它本质上就是MVC的改进版.MVVM就是将View的状态和行为抽象化,将视图UI和业务逻辑分开,View和Model之 ...
- vue手机端回退_从外链回退到vue应用不触发生命周期、beforeRouterEnter等钩子函数的问题...
在iphoneX及以上版本从外链回退不触发事件,7P,7没发现这个bug 安卓上自测没有发现这个问题 最近做项目中发现了一个问题,iphoneX及以上版本从当前vue应用中跳转到外部链接然后在回退到v ...
- 基于vue技术栈制作自己的简历网站问题总结篇(入门vue基础项目)
前言 目前在学习vue技术栈的同时接触到了很多以前没用过的各种工具(如webpack,npm,git等等),配合着vue全家桶里的一些东西做了一个基于vue的个人简历网站(虽然用vue框架搭简历网站优 ...
- Vue之MVVM、Vue实例对象、生命周期
1.初识Vue Vue是一套用于构建用户界面的渐进式框架,Vue 被设计为可以自底向上逐层应用,Vue的核心是只关注视图层(如何理解),不仅易于上手,还便于与第三方库或既有项目整合. 渐进式框架:渐进 ...
- Lison《vue技术栈开发实战》(一)
Lison<vue技术栈开发实战>(一) 第01章 使用vue-cli3创建项目 使用Vue UI创建.管理项目 项目结构目录整理 初始文件添加 基本配置详解 使用代理解决跨域 第02章 ...
- Java的技术采⽤用⽣生命周期
这部分采⽤用与英⽂文站同样的标准划分: 创新者 早期采⽤用者 早期⼤大众 晚期⼤大众 技术采⽤用⽣生命周期是美国⾼高科技营销⼤大师杰弗⾥里里·摩尔在⾃自⼰己的书<跨越鸿沟>⾥里里提出的概念 ...
- 容器编排技术 -- Kubernetes Pod 生命周期
容器编排技术 -- Kubernetes Pod 生命周期 1 Pod phase 2 Pod 状态 3 容器探针 3.1 该什么时候使用存活(liveness)和就绪(readiness)探针? 4 ...
最新文章
- 图文解释XCode常用快捷键的使用
- JQuery全选/反选设置
- python怎样导出py文件_导出python模块(到字符串或py文件)
- 性能测试之JMeter函数助手详解
- complete_code_Chapter1
- 终于有了自己的域名了
- 分布式系统的一些基本概念
- Lesson 10.1Lesson 10.2 开篇:超参数优化与枚举网格搜索的理论极限随机网格搜索
- SecureCRT解压版使用
- 移动端开发旅游预约_套餐列表页面动态展示_套餐详情页面动态展示
- FBReader接入
- EMC、EMI、ESD、EMS区别 最清晰的解释送给你
- 史上最难的初等几何问题?分享一个参考答案
- 162_apt-cyg安装
- 每日10行代码82:网上购物活动满减凑单计算器
- ​Spring Cloud中统一异常处理是怎么做的?
- RationalDMIS 2020高级编程:快速3-2-1构建坐标系
- 集成运放的主要技术指标
- 04_NetBean安裝
- 接口测试的标准和规范性
热门文章
- 你必知的人工智能十大技术及应用,学习AI的你看完会选择往哪个方向发展呢?
- speedoffice好用吗
- html如何实现字体重叠,div css每行文字显示一半 同时文字字体重叠显示不全解决方法...
- OO第三单元总结——JML规格
- slicer安装_3D Slicer中文教程(二)—软件功能界面介绍
- Hyperf定时任务
- [ZZ]世界上最受欢迎的10个Linux发行版
- 串口服务器经过无线网桥,华测风塔GPS自动化监测方案设计书.docx
- :“ORA-12514: TNS:listener does not currently know of service requested in connect descriptor”错误
- 集成极光推送的一点说明