Vue中对生命周期的理解

      Vue中对生命周期的理解

1. 实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期,然后就会执行beforeCreate钩子函数,这个时候,数据还没有挂载ね,只是一个空壳,无法访问到数据和真实的dom,一般不做操作

2. 挂载数据,绑定事件等等,然后执行created函数,这个时候已经可以使用到数据,也可以更改数据,在这里更改数据不会触发updated函数,在这里可以在渲染前倒数第二次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取

3. 接下来开始找实例或者组件对应的模板,编译模板为虚拟dom放入到render(渲染)函数中准备渲染,然后执行beforeMount钩子函数,在这个函数中虚拟dom已经创建完成,马上就要渲染,在这里也可以更改数据,不会触发updated,在这里可以在渲染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取

4. 接下来开始render,渲染出真实dom,然后执行mounted(安装好的)钩子函数,此时,组件已经出现在页面中,数据、真实dom都已经处理好了,事件都已经挂载好了,可以在这里操作真实dom等事情...

5. 当组件或实例的数据更改之后,会立即执行beforeUpdate,(更新之前)然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染,一般不做什么事儿

6. 当更新完成后,执行updated,数据已经更改完成,dom也重新render完成,可以操作更新后的虚拟dom

7. 当经过某种途径调用$destroy方法后,立即执行beforeDestroy,一般在这里做一些善后工作,例如清除计时器、清除非指令绑定的事件等等

8. 组件的数据绑定、监听...去掉后只剩下dom空壳,这个时候,执行destroyed,在这里做善后工作也可以

时间: 2024-08-05 05:26:08

Vue中对生命周期的理解的相关文章

简单了解Vue中的生命周期

生命周期:一个组件从创建到销毁的这个过程叫做生命周期   生命周期钩子函数 1.组件从创建到销毁的过程            1.创建前 创建后            2.挂载前  挂载后            3.更新前  更新后            4.销毁前  销毁后                beforeCreate:            当前生命周期函数主要用来做初始化工作,在这个生命周期函数中我们可以创建一个loading created:(*****)           

Vue 实例中的生命周期钩子

Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑. Vue 实例 在文档中经常会使用 vm 这个变量名表示 Vue 实例,在实例化 Vue 时,需要传入一个选项对象,它可以包含数据(data).模板(template).挂载元素(el).方法(methods).生命周期钩子(lifecyclehook)等选项. Vue 实例化的选项 需要注意的

聊一聊Vue实例与生命周期运行机制

Vue的实例是Vue框架的入口,担任MVVM中的ViewModel角色,所有功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM .在这个过程中,事件钩子可以辅助我们对整个实例生成.编译.挂载.销毁等过程进行js控制,给我们提供了执行自定义逻辑的机会.所以学习实例的生命周期,能帮助我们理解vue实例的运行机制,更

12、Cocos2dx 3.0游戏开发找小三之3.0中的生命周期分析

重开发人员的劳动成果.转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27706303 生命周期分析 在前面文章中我们执行了第一个 Cocos2d-x 游戏,同一时候也介绍了控制游戏生命周期的 AppDelegate 文件. 以下我们将结合一些游戏调试经常使用的技巧以及VS工具调试的方法来分析 Cocos2d-x 程序的生命周期. VS工具调试 1.查看内存窗体 2.查看输出窗体 3.假设程序崩溃查看调用堆栈窗体 打开项目

Android开发--Activity生命周期回顾理解

Activity和Servlet一样,都用了回调机制.我们通过类比servlet来学习Activity.当一个servlet开发出来之后,该servlet运行于Web服务器中.服务器何时创建servlet的实例,何时调用servlet的方法向用户生成响应,程序员无法控制,这种回调由服务器自行决定.Activity也一样,被开发出来,开发者只要在AndroidManifest.xml文件配置该Activity即可.至于该Activity何时被实例化,它的方法何时被调用,对开发者来说完全是透明的.

vue组件的生命周期

先来张组件生命周期的示意图: 文档里是这样描述的:你不需要立马弄明白所有的东西,不过以后它会有帮助.传送门. Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法.这是因为箭头函数绑定了父上下文,因此this与你期待的Vue实例不同. 1.beforeCreate 在实例初始化之后,数据观测和event/watcher时间配置之前被调用. 2.created 实例已经创建完成之后被调用.在这一步,实例

从零开始学 Web 之 Vue.js(三)Vue实例的生命周期

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/ 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目.现在就让我们一起进入 Web 前端学习的冒险之旅吧! 一.vue实例的生

关于Vue实例的生命周期(2)

 关于Vue实例的生命周期(2) 创建(create)->挂载(mount)->更新(update)->销毁(destory) 钩子函数触发事件 beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用. created 实例已经创建完成之后被调用.在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调.然而,挂载阶段还没开始,$el 属性目

黑马eesy_15 Vue:vue语法和生命周期与ajax异步请求

自学Java后端开发,发现14 微服务电商[乐优商城]实战项目,在介绍完SpringCloud后就要肝前端基础知识ES6和Vue. 所以本篇入门Vue练习记录的过程,目的是供自学后端Java遇到Vue使用需求的时候加强一下Vue基本使用的能力. vue语法和生命周期与ajax异步请求 1.Vue的快速入门2.Vue的语法 插值表达式 事件的绑定 数据的显示 逻辑判断和循环输出3.Vue的生命周期 8个生命周期的执行点 4个基本的 4个特殊的4.axios的ajax异步请求 它和jquery的aj