在vue官网中介绍生命周期的图如下：

　　

　　　　　　　　

主要测试代码如下： 主要是测试前四个生命周期beforeCreate,created,beforeMount,mounted,里面同步和异步的执行顺序，其它的类似。

　　

　　

result:在控制台可以看到：

　　　　

　　从上图可以看出生命周期都是同步的，异步都在生命周期之后执行。

　　在看一段有意思的代码：

　　

　　附上结果：

　　

　　有兴趣的同学可以想想这是为什么？

　　本节内容就到这里了，谢谢阅读！！

　　

关于vue生命周期中的同步异步的理解的更多相关文章

  1. VUE生命周期中的钩子函数及父子组件的执行顺序

    先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行 ...

  2. 在vue生命周期中及时销毁全局作用的代码

    一.纯客户端中 对于全局的代码,比如定时器等,在 beforeDestroy或 destroyed 生命周期时将其销毁.如果在跳转路由时候,组件销毁了,全局的定时器却没有销毁,这会使得页面产生卡顿. ...

  3. vue生命周期图示中英文版Vue实例生命周期钩子

    vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...

  4. Vue生命周期，面试常见问题

    一.对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View 代表UI 组件,它负责将数 ...

  5. vue生命周期的介绍

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. vue 生命周期

    一 vue的生命周期如下图所示(很清晰) 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <h ...

  7. vue生命周期的理解

    我从官网上下载了一张vue生命周期的图,接下来实际分析一波vue到底执行了什么东西. 1.我们在使用vue时必不可少的操作就是 var vm = new Vue({}),这样我们就创建了一个vue的实 ...

  8. Vue生命周期学习

    转自https://www.w3cplus.com/vue/vue-instances-and-life-cycles.html Vue实例虽然没有完全遵循MVVM模型,但Vue的设计无疑受到了它的启 ...

  9. vue生命周期和react生命周期对比

    一 vue的生命周期如下图所示(很清晰)初始化.编译.更新.销毁 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE ht ...

随机推荐

  1. 2017.3.12 H5学习的第一周

    本周我开始了H5的学习,在这一周里我们从html的基本标签开始一直讲到了才算css的用法,接下来我将记录下来本周我学到的H5的内容. 首先是声明文档,声明文档类型是HTML5文件,它在HTML文档必不 ...

  2. C++命名空间的解释 【转】

    使用命名空间的目的是对标识符的名称进行本地化,以避免命名冲突.在C++中,变量.函数和类都是大量存在的.如果没有命名空间,这些变量.函数.类的名称将都存在于全局命名空间中,会导致很多冲突.比如,如果我 ...

  3. 静态链表实现(A-B)+(B-A)【代码】

    -----------------------------------------------第一次发代码,写在前面------------------------------------------ ...

  4. 深入tornado中的IOStream

    IOStream对tornado的高效起了很大的作用,他封装了socket的非阻塞IO的读写操作.大体上可以这么说,当连接建立后,服务端与客户端的请求响应都是基于IOStream的,也就是说:IOSt ...

  5. 基于Haproxy+Keepalived构建高可用负载均衡集群

    实验环境: 主机名 IP地址 VIP 192.168.200.254 Haproxy-1 192.168.200.101 Haproxy-2 192.168.200.102 Nginx1 192.16 ...

  6. Ubuntu中文本地化后字体改变

    ubuntu中文本地化后会安装2个字体 fonts-arphic-ukai fonts-arphic-uming 找到这两个字体删除之.. sudo apt- get remove fonts-arp ...

  7. python在cmd上导包成功，但是python charm上面就提示找不到

    失败 成功 原因:我的python file名称和numpy 的名字一样了,把python file 的名字改了就好了

  8. 【转载】stm32定时器-----珍藏版

    今天看到一个讲解定时器特别细致入微的文章,真是难得... 原文地址:http://www.cnblogs.com/zjvskn/p/5751591.html 一.STM32通用定时器原理 STM32  ...

  9. .NET 二维码生成（ThoughtWorks.QRCode）【转发jiangys】

    .NET 二维码生成(ThoughtWorks.QRCode) 2015-06-21 22:19 by jiangys, 3790 阅读, 8 评论, 收藏, 编辑 引用ThoughtWorks.QR ...

  10. 频繁模式挖掘中Apriori、FP-Growth和Eclat算法的实现和对比

    最近上数据挖掘的课程,其中学习到了频繁模式挖掘这一章,这章介绍了三种算法,Apriori.FP-Growth和Eclat算法:由于对于不同的数据来说,这三种算法的表现不同,所以我们本次就对这三种算法在 ...