1、beforeCreate: 创建Vue实例之前(只有默认的一些生命周期和默认的一些事件,data和methods还没有被初始化)

2、Create: 数据已经在data方法中初始化了,计算属性,事件回调都已经完成,只不过dom并未挂载
挂载之前回进行得操作会找是否有需要挂载得el对象,有的话判断是否有template模板,有得话那么将模板转化为render函数,通过render函数去渲染DOM树
如果都没有得话,直接把最外层得el对象作为html得模板(data和methods已经被初始化了,最早可以调用到方法和数据的地方就是created)

3、beforeMount:render方法首次被调用生成虚拟DOM(在内存中已经渲染好了模板但并未挂载到页面中此时的页面还是旧页面)

4、mounted:挂载已经完成了,dom树已经完成渲染到页面中得,所以在这时我们可以对真实dom进行操作了(把内存中的模板替换到网页上,此时已经生成真实的dom了)

5、beforeUpdate:数据有更新,更新之前调用(data数据已经更新为最新的数据,页面的数据还是旧的)

6、updated:数据更新之后(页面数据和data数据均被更新)

7、beforeDestroy:实例销毁前(进入销毁阶段,此时所有的data和methods还未被销毁,处于可用状态)

8、destroyed:组件销毁之后(销毁完成,所有的数据,方法,指令、过滤器都被销毁,不可使用了)

vue的八个生命周期的更多相关文章

  1. Vue2.5笔记:Vue的实例与生命周期

    理解与认识 Vue 的实例是我们学习 Vue 非常重要的一步,也是非常必须的,因为实例是它的一个起点,也是它的一个入口,只有我们创建一个 Vue 实例之后,我们才行利用它进行一些列的操作. 首先 Vu ...

  2. vue基本配置和生命周期

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

  3. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期

    回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...

  4. Vue(十)生命周期

    Vue生命周期 vue实例从创建到销毁的过程,称为生命周期,共有八个阶段 <script> window.onload=function(){ let vm = new Vue({ el: ...

  5. 前端笔记之Vue(三)生命周期&CSS预处理&全局组件&自定义指令

    一.Vue的生命周期 生命周期就是指一个对象的生老病死的过程. 用Vue框架,熟悉它的生命周期可以让开发更好的进行. 所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和 ...

  6. Vue 实例中的生命周期钩子

    Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...

  7. vue的组件和生命周期

    Vue里组件的通信 通信:传参.控制.数据共享(A操控B做一个事件) 模式:父子组件间.非父子组件 父组件可以将一条数据传递给子组件,这条数据可以是动态的,父组件的数据更改的时候,子组件接收的也会变化 ...

  8. 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)

    一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...

  9. 【Vue.js学习】生命周期及数据绑定

    一.生命后期 官网的图片说明: Vue的生命周期总结 var app = new Vue({ el:"#app", beforeCreate: function(){ consol ...

随机推荐

  1. Android使用阿里镜像

    在学习room时项目一直在编译中,最后排查发现是依赖没有下载完导致.随后查询将依赖下载源改为阿里源,即可正常使用. 需要修改 build.gradle (project),改为以下内容: // Top ...

  2. 《30天自制操作系统》软盘 -> VMware虚拟机

    书名叫做30天自制操作系统,按照学校课设答辩的时间来看,估计得把书名改成<一周自制操作系统>,太卷了哈哈哈 我们可以使用qemu来模拟物理机 make run第二天制作的操作系统 可以看到 ...

  3. Eclipse配置反编译

    Eclipse配置反编译 ​ 之前用IDEA一直让我很喜欢的点就是,什么东西都自动集成,下载.但是终归是学(po)习(jie)版,在正式企业开发中,要小心版权的问题(公司给你买了当我没说).抛开插件能 ...

  4. 冲刺Day3

    每天举行站立式会议照片: 昨天已完成的工作: 1.完成登录注册的后台代码. 2.确定商品查找的接口. 3.尝试与数据库连接. 今天计划完成的工作: 成员 任务 高嘉淳 完成用户信息管理的部分功能 覃泽 ...

  5. AcWing 380. 舞动的夜晚

    大型补档计划 题目链接 这题是求必须边,而不是不可行边,因为不可行边 = 必须边 + 死掉了的边(貌似lyd第三版书上还是说的不可行边)先跑最大流. 在跑完以后的残余网络上,对于一条当前匹配的边 \( ...

  6. pyppeteer 登录一般网站 并利用 http方法获取登录页面的验证码

    主函数 新建浏览器,进行登录,由于验证码的识别准确率不是百分之百,需要多次尝试. async def main(self, username, pwd, url): # 定义main协程函数, log ...

  7. 微信开发中,不同手机系统遇到的bug(不定时更新)

    Ios系统 1.body上绑定click事件失效. 解决:body标签下面,用个div,当做包裹所有内容的大容器.给这个div,绑定click事件. 2.不支持 YYYY-MM-DD 的时间格式. 用 ...

  8. STL——容器(deque) 构造 & 头尾添加删除元素

    1.deque容器概念 deque是"double-ended queue"的缩写,和vector一样都是STL的容器,唯一不同的是:deque是双端数组,而vector是单端的. ...

  9. SpringBoot整合RabbitMQ实践教程

    1. MQ   MQ(Message Queue),消息队列,是生产者和消费者模型中传递信息的容器,主要用于线程或进程之间通信.   MQ主要的应用场景为:应用解耦.异步处理,流量削锋,日志处理等. ...

  10. CD租赁售卖系统javaweb系统展示SSM框架

    一.功能要点 1.管理员登录 2.用户注册登录 3.用户权限,可以查看可借或可买cd,并实现对cd的买租 4.管理员可以添加cd, 5.cd的类型,价格由管理员设置 二.运行环境 数据库mysql: ...