Vue2.x 系列文章目录

内容	参考链接
Vue2.x - 基础（零）	模板语法、数据绑定、el/data写法、MVVM模型
Vue2.x - 基础（一）	数据代理、事件处理、键盘事件
Vue2.x - 基础（二）	计算属性、监听属性
Vue2.x - 基础（三）	样式绑定、条件渲染
Vue2.x - 基础（四）	列表渲染
Vue2.x - 基础（五）	内置指令、自定义指令
Vue2.x - 基础（六）	生命周期
Vue2.x - 基础（七）	组件化编程【非单文件组件】
Vue2.x 进阶	Vue2.x 进阶
Vue2.x - 周边（Vuex、Vue-router）	Vuex、Vue-router
Vue3.0 - 新增	Vue3.0 新增内容
Vue2.x 项目（附源码）	Vue + ElementUI 后台管理项目（附源码）
Vue3.0 项目	Vue3.0 企业级 App

---

一、Vue 生命周期

1. 生命周期： 其他叫法。

又名：生命周期回调函数、生命周期函数、生命周期钩子。

2. 什么是生命周期？

Vue 在关键时刻帮我们调用的一些特殊名称的函数。

3. 生命周期的 this 指向

生命周期函数中的 this 指向是 vm 或 组件实例对象。

4. 注意事项

生命周期函数的名字不可以更改，但函数的具体内容是程序员根据需求编写的。

5. 实例：使用 mounted() 过渡效果

实例：实现内容自动淡入淡出效果。

   <div id="root"><h3 :style="{opacity}">生命周期钩子</h3></div>const vm = new Vue({el: '#root',data: function () {return {opacity: 1}},mounted() {setInterval(() => {this.opacity -= 0.01if(this.opacity <= 0) this.opacity = 1}, 18)}})

二、分析生命周期

1. beforeCreate()

在实例初始化之后，进行数据侦听和事件/侦听器的配置之前同步调用。

2. created()

在实例创建完成后被立即同步调用。

1. 在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。
2. 然而，挂载阶段还没开始，且 $el property 目前尚不可用。

3. beforeMount()

在挂载开始之前被调用：相关的 render 函数首次被调用。
该钩子在服务器端渲染期间不被调用。

4. mounted()

1. 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
2. 如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。
3. 注意 mounted 不会保证所有的子组件也都被挂载完成。

5. beforeUpdate()

在数据发生改变后，DOM 被更新之前被调用。

1. 这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。
2. 该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务器端进行。

6. updated()

在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。

1. 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
2. 然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用 计算属性 或 watcher 取而代之。

7. beforeDestory()

实例销毁之前调用。在这一步，实例仍然完全可用。
该钩子在服务器端渲染期间不被调用。

8. destoryed()

实例销毁后调用。
该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
该钩子在服务器端渲染期间不被调用。

   <div id="root"><h3>当前的n值是：{{n}}</h3><button @click="add">点我 n+1</button><button @click="bye">带点我销毁 vm</button></div>const vm = new Vue({el: '#root',data: function () {return {n: 1}},methods: {add() {console.log('add')this.n++},bye() {console.log('bye')this.$destroy()}},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')}})

三、总结生命周期

1. 常用生命周期钩子

1. mounted：发送 ajax 请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
2. beforeDestroy：清除定时器、解绑自定义事件、取消订阅信息【收尾工作】

2. 关于销毁 Vue 实例

1. 销毁后借助 Vue 开发者工具看不到任何信息。
2. 销毁后自定义事件会失效，但原生 DOM 事件依然有效。
3. 一般不会在 beforeDestory 操作数据，因为即便操作数据，也不会再触发更新流程了。

   <div id="root"><h3 :style="{opacity}">生命周期钩子</h3><button @click="opacity = 1">透明度设置为 1</button><button @click="stop">点我停止变换</button></div>const vm = new Vue({el: '#root',data: function () {return {opacity: 1}},methods: {stop(){this.$destroy()}},mounted(){console.log('mounted', this)this.timer = setInterval(() => {console.log('setInterval')this.opacity -= 0.01if(this.opacity <= 0) this.opacity = 1}, 16)},beforeDestroy() {console.log('vm即将被干掉！')clearInterval(this.timer)}})

四、生命周期钩子图解

不积跬步无以至千里 不积小流无以成江海

Vue —— 基础（六）（生命周期）相关推荐

1. vue：基础：生命周期

   1.vue 的生命周期[8个,作用:更好的实现逻辑] [创建前后.加载前后.更新前后.销毁前后] beforeCreated:在实例初始化之后,当前阶段 data.methods.watch.comp ...

2. 第五节：轻松掌握 vue 实例的生命周期

   公众号后台收到不少同学催更新,马上来. 上两节我们都是讲vue的实例,简单创建和定义实例的4个常用选项,没看过的伙伴可以先去看上两节,按顺序学习比较容易掌握. 这一节我们学习vue实例的生命周期,没错 ...

3. python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)...

   昨日内容回顾 0. 组件注意事项!!!data属性必须是一个函数!1. 注册全局组件Vue.component('组件名',{template: ``})var app = new Vue({el: ...

4. Vue实例的生命周期

   vue实例的生命周期 什么是生命周期:从Vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! 生命周期钩子:就是生命周期事件的别名而已: 生命周期钩子 = 生命周期函 ...

5. Maven-学习笔记04【基础-Maven生命周期和概念模型图】

   Java后端 学习路线 笔记汇总表[黑马程序员] 黑马程序员(腾讯微云)Maven基础讲义.pdf Maven-学习笔记01[基础-Maven基本概念] Maven-学习笔记02[基础-Maven的安 ...

6. vue组件的生命周期和执行过程

   Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法.这是因为箭头函数绑定了父上下文,因此this与你期 ...

7. vue父子组件生命周期顺序_vue父子组件生命周期执行顺序

   Parent -- Child1 -- Child2 装载 parent beforeCreate parent created parent beforeMount child1 beforeCre ...

8. Vue父子组件生命周期

   Vue父子组件生命周期 Vue实例需要经过创建.初始化数据.编译模板.挂载DOM.渲染.更新.渲染.卸载等一系列过程,这个过程就是Vue的生命周期,Vue中提供的钩子函数有beforeCreate.c ...

9. 计算属性与监听器、Vue 实例的生命周期

   本文是我在学习过程中记录学习的点点滴滴,仅仅为了学完之后巩固一下,日后忘记了也可以方便快速的复习. 计算属性与监听器.Vue 实例的生命周期 前言 一.计算属性 1.1.计算属性初步理解 1.2.计算 ...

10. vue实例的生命周期详解

    Vue实例的生命周期 简介 此篇文章说的是最简单的单个VUE组件的生命周期. 官网中的长图诠释了Vue实例从创建,运行到销毁的整个过程.从vue实例的创建,运行,销毁期间,总是伴随着各种各样的事件,这 ...

最新文章

1. hexo从零开始到搭建完整
2. python如何初始化一个二维数组_使用Python实现一个简单的商品期货布林指标突破策略...
3. leetcode-14-最长公共前缀
4. 通过 Ruby 买卖Bitcoin：使用开放交易所OceanOne
5. ADI官方源码快速搭建demo工程验证设计的正确性
6. elf 取路径_c – 获取主要可执行文件的ELF标题
7. execl执行linux命令,使用execl运行Linux命令
8. 数据结构之树与二叉树的应用：平衡二叉树（AVL）
9. Windows10 家庭版安装Docker
10. vue 切换页面没有改变滚动条_Web前端高级Vue学习笔记（三）
11. quartz定时任务中常用的cron表达式
12. Google Code 5岁啦！
13. php 微信H5支付
14. 开源排版软件 Scribus
15. 3DMax基础知识详解
16. linux如何扫描文件格式,Linux系统如何使用扫描仪
17. 不积跬步无以至千里007
18. 省编码市编码区县编码_如何摆脱编码的束缚，走向事业
19. 阿拉伯数字转韩文、中文
20. Excel怎么实现分类自动编号

热门文章

1. python stacking_详解 Stacking 的 python 实现
2. 爬虫保姆级教程3：利用python-Flask框架搭建本地数据可视化网站
3. 求三角形面积（Python）
4. 第二类斯特林数学习笔记
5. Spring中常见的设计模式
6. 第二十一天- 基本模块
7. JVM垃圾回收器和调优
8. python 通过电话号码获取微信性别信息
9. 数据管理的三个阶段（人工管理，文件系统，数据库系统）
10. 无锁CAS/无锁队列