码迷,mamicode.com
首页 > 其他好文 > 详细

VUE-生命周期

时间:2020-02-22 12:23:01      阅读:103      评论:0      收藏:0      [点我收藏+]

标签:功能   font   初始   vue   开发   lis   数据   methods   size   

什么是生命周期?

生命周期是指 vue实例(或者组件)从诞生到消亡所经历的各个阶段的总和;

三个阶段:创建、运行、销毁

    • 创建阶段:由空白期、data/methods初始化、模板挂载、模板渲染等组成;
    • 运行阶段:分为 更新前 和 更新后 两部分;
    • 销毁阶段:分为 销毁前 和 销毁后;

成员方法:

    • 创建:beforeCreate created beforeMount mounted;
    • 运行:beforeUpdate updated;
    • 销毁:beforeDestroy destroyed;

为什么学习?

不同阶段完成不同的任务,开发者可以利用各个阶段的特点完成业务需要的相关功能;

创建阶段分析

创建阶段一共四个方法,与el,data都是并列关系;

beforeCreate:此时 Vue 对象刚创建好,没有任何成员,data、methods等都没有,只有this;

created:此时内部已经完成了data、methods等成员的设置,也是 data初始化的最好时机;

beforeMount:此时 Vue 实例已经把 div容器 获取到,但是内部的 Vue指令等信息还没有被编译处理;

mounted:此时 Vue获取到的div容器内部的原生指令已经被编译处理好了,并且也完成了容器的渲染工作,此时模板中已经看不到vue原始指令了;

 

运行和销毁阶段分析 

运行阶段

方法 不会 自动执行,当data成员数据发生变化,就执行了,数据变化多次,方法也会 重复 执行多次

beforeUpdate:可以感知到数据变化之前页面上关于该数据的样子

updated:可以感知到数据变化之后页面上该数据的样子

销毁阶段

beforeDestroy:实例销毁之前

destroyed:实例销毁之后

 

 

 

 

 

 

 

 

VUE-生命周期

标签:功能   font   初始   vue   开发   lis   数据   methods   size   

原文地址:https://www.cnblogs.com/star-min/p/12344598.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!