vue生命周期的基础部分

Vue实例从创建到销毁的过程,就是生命周期。

Vue的生命周期包括:开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。

在Vue的整个生命周期中,提供了一系列的事件,可以注册JavaScript方法,达到控制整个过程的目的,在这些JavaScript方法中的this直接指向的是vue的实例。

在Vue的整个生命周期中,实例可以调用一些生命周期钩子,这提供了执行自定义逻辑的机会。

Vue提供的生命周期钩子如下:

① beforeCreate

在实例初始化之后,数据观测(data observer,开始监控Data对象数据变化)和初始化事件(init event,Vue内部初始化事件)之前被调用。

② created

在实例已经创建完成之后被调用。实例已完成以下的配置:数据观测(data observer),属性和方法的运算,event事件回调。挂载阶段尚未开始,$el 属性不可见。

③ beforeMount

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

④ mounted

在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。此时模板中的html渲染到了html页面中,此时一般可以做一些Ajax操作。注意mounted只会执行一次。

⑤ beforeUpdate

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

⑥ updated

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

⑦ beforeDestroy

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

⑧ destroyed

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

原文地址:https://www.cnblogs.com/mahmud/p/10089502.html

时间: 2024-10-04 06:31:07

vue生命周期的基础部分的相关文章

vue 生命周期初探

vue 以后发之势加上其独有的特性(压缩后很小),轻量级的MVVM框架,目前github star已有5.94万,而react 7万.由此可见是两个非常热门前端框架.这里就vue的生命周期做个初步体验. 发现看视频,动手之后,过段时间还是会忘,所以写一篇短文以备不时之需. 先附上官网的图片:vue生命周期 生命周期的钩子函数如果使用得当,会大大增加开发效率: 生命周期实践: 为了更好的查看beforeUpdate.updated,beforeDestroy,destroy钩子函数,使用v-on绑

vue生命周期的介绍

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue生命周期</title> 6 <script src="../js/vue.js"></script> 7 <meta name="viewport" content="width=devic

vue 生命周期

一 vue的生命周期如下图所示(很清晰) 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue生命周期</title> <script src="../js/vue.js"></script> &

vue生命周期学习心得(下)

此文接vue生命周期学习心得(上)http://www.cnblogs.com/pengshadouble/p/7488330.html通过vue生命周期学习心得(上),大至了解了vue生命周期的8个阶段及相关钩子函数触发的时间点,这章我们通过简单的代码看一下具体的运行结果: <template> <div id="container"> <headers></headers> <router-view></router

Vue生命周期及业务场景使用

vue里的生命周期是什么? vue实例从创建到销毁的过程称之为vue的生命周期 vue的生命周期各阶段都做了什么? beforeCreate 实例创建前:这个阶段实例的data.methods是读不到的created 实例创建后:这个阶段已经完成了数据观测(data observer),属性和方法的运算, watch/event 事件回调.mount挂载阶段还没开始,$el 属性目前不可见,数据并没有在DOM元素上进行渲染beforeMount:在挂载开始之前被调用:相关的 render 函数首

vue生命周期钩子函数

转载自:https://segmentfault.com/a/1190000008879966 vue生命周期探究(一) 前言 在使用vue开发的过程中,我们经常会接触到生命周期的问题.那么你知道,一个标准的工程项目中,会有多少个生命周期勾子吗?让我们来一起来盘点一下: 根组件实例:8个 (beforeCreate.created.beforeMount.mounted.beforeUpdate.updated.beforeDestroy.destroyed) 组件实例:8个 (beforeCr

vue生命周期、钩子函数

https://segmentfault.com/a/1190000011381906    详解生命周期和钩子函数 每个vue实例再被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期. 可以看到在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么先列出所有的钩子函数,然后我们再一一详解: beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy

Vue生命周期学习

转自https://www.w3cplus.com/vue/vue-instances-and-life-cycles.html Vue实例虽然没有完全遵循MVVM模型,但Vue的设计无疑受到了它的启发. View:是看得到的,即视图,用到Vue的项目中来,它应该是"模板".也就是用来挂载Vue实例的一个DOM元素,通常在项目根目录中index.html文件中出现,比如<div id="app"></div>. Model:即模型(或数据),

vue生命周期和react生命周期对比

一 vue的生命周期如下图所示(很清晰)初始化.编译.更新.销毁 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue生命周期</title> <script src="../js/vue.js"></