VUE生命周期的四个阶段

  • create 创建 -------- 创建vue实例并初始化
  • mount 挂载 -------- 把vue实例和视图进行关联
  • update 更新 ------- 监听数据与视图的变化
  • destroy销毁 ------- 销毁实例

生命周期 --- 钩子函数

vue为上面的4个大的阶段提供了一个可编程的接口,我们可以在这4个的某个时段写入一些自己的逻辑,vue是通过配置一个叫做生命周期钩子函数的选项来实现的

beforecreate

  • 在实例初始化之后,数据观测(data observer)和event/watcher事件配置之前调用,里面的this指向实例

create

  • 实例已经创建完成之后被调用。在这一步,实例已完成以下的配置;数据观测(data observer),属性和方法的运算,watch/event事件回调。然而,挂载阶段还没开始,还未与页面关联起来,$el属性目前不可见。可在这阶段进行一些初始化的操作(如ajax获取数据之类的)

beforemount

  • 在挂载之前没调用,解析模板,把实例对象下的$el属性指向设置中的el参数指定的元素,这个解析后的模板还没有和$el进行绑定

mounted

  • 挂载之后调用,把解析后的模板与页面元素进行绑定,用解析后的模板内容替换页面

beforeupdate

  • 在数据绑定之前被调用

update

  • 在数据改变之后被调用,可以进行依赖于dom的操作(可以在这个阶段进行dom操作)

详解vue生命周期及每个阶段适合进行的操作的更多相关文章

  1. 【Vue笔记】-- 详解vue生命周期

    针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...

  2. 详解vue生命周期

    vue生命周期 @(vue)[生命周期] 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周 ...

  3. 【Vue】详解Vue生命周期

    Vue实例的生命周期全过程(图) (这里的红边圆角矩形内的都是对应的Vue实例的钩子函数) 在beforeCreate和created钩子函数间的生命周期 在beforeCreate和created之 ...

  4. 详解Vue生命周期---1

    目录 Vue实例的生命周期全过程(图) 在beforeCreate和created钩子函数间的生命周期 created钩子函数和beforeMount间的生命周期 el选项的有无对生命周期过程的影响 ...

  5. 实例化vue发生了什么(详解vue生命周期)

    const app = new Vue({ el:"#app', data:{ message:'hello,lifePeriod' }, methods:{ init(){ console ...

  6. Vue 实例详解与生命周期

    Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...

  7. maven详解之生命周期与插件

    Maven是一个优秀的项目管理工具,它能够帮你管理编译.报告.文档等. Maven的生命周期: maven的生命周期是抽象的,它本身并不做任何的工作.实际的工作都交由"插件"来完成 ...

  8. 05-Vue入门系列之Vue实例详解与生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

  9. Vue入门系列(五)Vue实例详解与生命周期

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

随机推荐

  1. SOCKET网络基础

  2. 增量学习不只有finetune,三星AI提出增量式少样本目标检测算法ONCE | CVPR 2020

    论文提出增量式少样本目标检测算法ONCE,与主流的少样本目标检测算法不太一样,目前很多性能高的方法大都基于比对的方式进行有目标的检测,并且需要大量的数据进行模型训练再应用到新类中,要检测所有的类别则需 ...

  3. Python封装应用程序的最佳项目结构是什么?

    Python封装应用程序的最佳项目结构是什么? 转载来源于stackoverflow:https://stackoverflow.com/questions/193161/what-is-the-be ...

  4. JS实现元素的全屏、退出全屏功能

     在实际开发中,我们很可能需要实现某一元素的全屏和退出全屏功能,如canvas.所幸的是,js提供了相关api用来处理这一问题,只需简单的调用requestFullScreen.exitFullScr ...

  5. Radware:上周五美国大规模DDoS攻击是如何发生的

    10月21日上午,Dyn遭受到拒绝服务(DoS)攻击,造成了托管DNS网络的中断.成千上万的网站因此变得不可访问,其中包括Amazon EC2.当天晚些时候,当攻击者发起第二轮针对Dyn DNS系统的 ...

  6. Mysql 开窗函数实战

    Mysql 开窗函数实战 Mysql 开窗函数在Mysql8.0+ 中可以得以使用,实在且好用. row number() over rank() over dense rank() ntile() ...

  7. 图论--最短路--SPFA

    SPFA算法(shortest path faster algorithm)算法是西南交通大学段凡丁于1994年发表的,它在Bellman-ford算法的基础上进行了改进,使其在能够处理待负权图的单元 ...

  8. IDEA破解,自动激活【2020年版本也可以破解】

    破解 在破解之前,需要下载的文件有两个ideaIU-2019.3.3.exe.jetbrains-agent-latest.zip,前者是程序安装包,后者是破解补丁包(PS:补丁包里面有使用说明,下面 ...

  9. 博客第一天:Typora和Markown语法初始

    ------------恢复内容开始------------ Markdown学习 一级标题:#+空格 二级标题:##+空格 三级标题:###+空格 四级标题:####+空格 五级标题:#####+空 ...

  10. 01_互联网基本原理和HTML入门

    从"上网"说开去 1.上网就是请求数据 老师现在进行一个互联网原理的整体感知的教学,你注意,整体感知中,一些具体的细节,可能令你没有安全感(很多的知识盲点).没有关系,老师进行的是 ...