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. python爬虫——用selenium爬取京东商品信息

    1.先附上效果图(我偷懒只爬了4页)  2.京东的网址https://www.jd.com/ 3.我这里是不加载图片,加快爬取速度,也可以用Headless无弹窗模式 options = webdri ...

  2. 在php中如何实现cookie即时生效,不用刷新就可以使用

    参考:https://www.jianshu.com/p/0468ef5dbf4d 今天在用php设置cookie的时候,发现cookie如果只是赋值一次的话,要手动刷新一下浏览器才能把数据及时更新, ...

  3. javascript-网页尺寸

    scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. off ...

  4. centos7在命令行下安装图形界面

    yum groupinstall "GNOME Desktop" "Graphical Administration Tools" ln -sf /lib/sy ...

  5. CentOS 7.4 安装网易云音乐

    1.下包–>网易云音乐 Ubuntu14.04(推荐14.04依赖包网上能找到) 提示:16.04有部分依赖包还找不到,有兴趣可以自行打包RPM安装. 2.解包 (1)使用 ar -vx解压ub ...

  6. [Qt] 数字转换为 QString

    数字转换为 QString 静态函数 number(), asprintf() 公用函数 setNum(), sprintf() QString::number(), setNum() 可转换进制

  7. 如何高效使用vim

    Vim 是一款文本编辑器,被称为编辑器之神,非常适合在shell 中编辑代码,熟练的使用Vim,可以让你高效的编写代码. Vim 是Vi 的增强版,所有的类Unix 系统,都自带这两个工具,这两个工具 ...

  8. QML-AES加解密小工具

    Intro 为了解码网课视频做的小工具,QML初学者可以参考一下. 项目地址 Todo 在插入新条目时,ListView不会自动根据section进行重排,因此出现同一个文件夹重复多次的现象.目测强行 ...

  9. shell脚本(多线程批量创建用户)

    shell脚本中的多线程 很多场景中会用到多线程,例如备份数据库,有100个库,正常备份效率极其低下.有了多线程原本可能需要10个小时备份,现在分10个线程同时去干,只要一个小时就解决了.今天就介绍下 ...

  10. nginx响应超时upstream timed out 问题处理

    环境介绍 服务器:centos7.2 应用:tomcat集群 服务:nginx 代理 问题描述: 这段时间,听项目组项目经理和业务需求人员跟我反馈,线上业务人员在操作业务交易时,有时会出现nginx错 ...