Vue组件生命周期运行原理解析


Posted in Vue.js onNovember 25, 2020

Vue实例有一个完整的生命周期,从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程,我们成为Vue 实例的生命周期,钩子就是在某个阶段给你一个做某些处理的机会。

Vue组件生命周期运行原理解析

beforeCreate( 创建前 )

在实例初始化之后,数据观测和事件配置之前被调用,此时组件的选项对象还未创建,el 和 data 并未初始化,因此无法访问methods, data, computed等上的方法和数据。

created ( 创建后 )

实例已经创建完成之后被调用,在这一步,实例已完成以下配置:数据观测、属性和方法的运算,watch/event事件回调,完成了data 数据的初始化,el没有。 然而,挂在阶段还没有开始, $el属性目前不可见,这是一个常用的生命周期,因为你可以调用methods中的方法,改变data中的数据,并且修改可以通过vue的响应式绑定体现在页面上,,获取computed中的计算属性等等,通常我们可以在这里对实例进行预处理,也有一些童鞋喜欢在这里发ajax请求,值得注意的是,这个周期中是没有什么方法来对实例化过程进行拦截的,因此假如有某些数据必须获取才允许进入页面的话,并不适合在这个方法发请求,建议在组件路由钩子beforeRouteEnter中完成。

beforeMount

挂在开始之前被调用,相关的render函数首次被调用(虚拟DOM),实例已完成以下的配置: 编译模板,把data里面的数据和模板生成html,完成了el和data 初始化,注意此时还没有挂在html到页面上。

mounted

挂在完成,也就是模板中的HTML渲染到HTML页面中,此时一般可以做一些ajax操作,mounted只会执行一次。

beforeUpdate

在数据更新之前被调用,发生在虚拟DOM重新渲染和打补丁之前,可以在该钩子中进一步地更改状态,不会触发附加地重渲染过程

updated(更新后)

在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用,调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作,然后在大多是情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环,该钩子在服务器端渲染期间不被调用

beforeDestroy(销毁前)

在实例销毁之前调用,实例仍然完全可用,

这一步还可以用this来获取实例,

一般在这一步做一些重置的操作,比如清除掉组件中的定时器 和 监听的dom事件

destroyed(销毁后)

在实例销毁之后调用,调用后,所以的事件监听器会被移出,所有的子实例也会被销毁,该钩子在服务器端渲染期间不被调用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
Vue2.0搭建脚手架
Mar 13 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
详解Vue3使用axios的配置教程
Apr 29 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
vue递归实现树形组件
Jul 15 Vue.js
vue element-ul实现展开和收起功能的实例代码
Nov 25 #Vue.js
在Vue中使用mockjs代码实例
Nov 25 #Vue.js
Vue3配置axios跨域实现过程解析
Nov 25 #Vue.js
Vue使用Element实现增删改查+打包的步骤
Nov 25 #Vue.js
vue + el-form 实现的多层循环表单验证
Nov 25 #Vue.js
vue打开其他项目页面并传入数据详解
Nov 25 #Vue.js
Vue开发中常见的套路和技巧总结
Nov 24 #Vue.js
You might like
PHP删除目录及目录下所有文件的方法详解
2013/06/06 PHP
php读取3389的脚本
2014/05/06 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
如何提高数据访问速度
2016/12/26 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
美国电力供应商店/电气批发商:USESI
2018/10/12 全球购物
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
国际贸易专业个人求职信格式
2014/02/02 职场文书
上课迟到检讨书
2014/02/19 职场文书
人事部经理岗位职责
2014/03/07 职场文书
先进事迹报告会主持词
2014/04/02 职场文书
操行评语大全
2014/04/30 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书