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. 使用 Junit + Mockito 实践单元测试

    一.前言 相信做过开发的同学,都多多少少写过下面的代码,很长一段时间我一直以为这就是单元测试... @SpringBootTest @RunWith(SpringRunner.class) publi ...

  2. linux php 安装 openssl扩展

    (1.生成 openssl.so 文件)#进入扩展目录cd /data/soft/php-5.5.38/ext/openssl#生成 configure 文件/usr/local/php/bin/ph ...

  3. curl请求curl_exec返回false,curl_error返回空

    网上查找了一下,由于采用https协议,一定要加入以下两句 curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); //不验证证书下同 curl_setopt ...

  4. 常用mysql 语句

    ALTER TABLE table_name AUTO_INCREMENT = 1;重置自增字段值从1开始 truncate table `table_name` 清空表,保留数据结构

  5. CG-CTF(6)

    CG-CTF https://cgctf.nuptsast.com/challenges#Web 续上~ 第三十一题:综合题2 查看本CMS说明: 分析: ①数据库表名为admin:字段名为usern ...

  6. 从一个数对列中找出素数对用于RAS加密的C++程序

    #include <iostream> #include <cmath> using namespace std; const int n = 10000; int isPri ...

  7. C# 基础知识系列- 14 IO篇 文件的操作

    0. 前言 本章节是IO篇的第二集,我们在上一篇中介绍了C#中IO的基本概念和一些基本方法,接下来我们介绍一下操作文件的方法.在编程的世界中,操作文件是一个很重要的技能. 1. 文件.目录和路径 在开 ...

  8. P1886 滑动窗口 单调队列

    题目描述 现在有一堆数字共N个数字(N<=10^6),以及一个大小为k的窗口.现在这个从左边开始向右滑动,每次滑动一个单位,求出每次滑动后窗口中的最大值和最小值. 例如: The array i ...

  9. centos6.X修改ssh默认端口号

    先查看下服务器端口号范围: # sysctl -a|grep ip_local_port_range net.ipv4.ip_local_port_range = 32768    61000 新ss ...

  10. ICML2016 TUTORIAL参会分享

    本次ICML会议的tutorial安排在主会前一天.这次tutorial内容非常丰富,有微软亚研的hekaiming(已经跳去facebook)介绍深度残差网络,也有deepmind的david si ...