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. htaccess 一般配置

    一.Apache服务器 <IfModule mod_rewrite.c> Options +FollowSymlinks -Multiviews RewriteEngine on Rewr ...

  2. C#多线程(16):手把手教你撸一个工作流

    目录 前言 节点 Then Parallel Schedule Delay 试用一下 顺序节点 并行任务 编写工作流 接口构建器 工作流构建器 依赖注入 实现工作流解析 前言 前面学习了很多多线程和任 ...

  3. 串口字符串-HEX格式

    串口字符串-HEX格式 C++SerialSerialPortHEX 介绍 串口通信过程中 通常涉及一个数据的模拟过程以及数据发送过程, 一般来说, 我们会发送一串指令给下位机 68 05 00 84 ...

  4. java关于throw Exception的一个小秘密

    目录 简介 throw小诀窍 总结 java关于throw Exception的一个小秘密 简介 之前的文章我们讲到,在stream中处理异常,需要将checked exception转换为unche ...

  5. Pycharm中设置encoding

    在Pycharm专业版中,为了防止文件在别的机器上出现乱码,所以需要进行字符编码的设置. 首先在Pycharm中的View中将下图中的Toolbar打上勾. 接着,工具栏就会出现,选中settings ...

  6. JavaScript面向对象的作用域链(转载)

    JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走遍天下都不怕... 一.“JavaScript中无块级作用域” 在Java或C# ...

  7. cobbler的网页操作

    需求:安装一台服务器 1.指定两块网卡一块外网一块内网2.内网ip10.0.0.62外网为172.16.1.623.主机名为m02 开始吧! 1.添加镜像文件 2.创建ks文件 编写ks文件 附:ks ...

  8. Ubuntu 14.04 配置samba

    Ubuntu 14.04 配置samba: 安装略 # vi /etc/samba/smb.conf security = user  (在[global]下任意添加) [share] path = ...

  9. Codeforces Round #509 (Div. 2) A. Heist 贪心

    There was an electronic store heist last night. All keyboards which were in the store yesterday were ...

  10. 25-Java-Spring框架(三)

    Spring框架的了解.SpringIOC的部分内容请阅读23-Java-Spring框架(一) SpringwebMVC的了解.请求流程.运用等请阅读24-Java-Spring框架(二) 四.Sp ...