初入vue的朋友可能会疑惑，组件初始化的时候,created，props，data到底谁先执行？

今天，我就带大家从源码的角度看看到底谁先执行？

我们知道,vue是个实例

那我们就从new Vue()开始，看看到底做了什么，首先是_init方法，初始化，我们点进去继续看看

可以看到首先是进行初始化生命周期，初始化事件中心，初始化渲染等操作，在created之前，这也就说明了为什么在created的时候无法进行dom操作

好了，这里主要的是initState函数，我们继续点进去

好了 看到这个函数，大家应该一目了然了吧

总结：执行顺序beforeCreate  ->inject -> Props ->  Methods ->  Data -> Computed -> Watch ->provide-> created

谁先执行？props还是data或是其他？ vue组件初始化的执行顺序详解的更多相关文章

  1. React生命周期执行顺序详解

    文章内容转载于https://www.cnblogs.com/faith3/p/9216165.html 一.组件生命周期的执行次数是什么样子的??? 只执行一次: constructor.compo ...

  2. javascript运行机制之执行顺序详解(转)

    转自http://www.admin10000.com/document/3385.html JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言, ...

  3. Unity 继承MonoBehaviour脚本 执行顺序 详解

    先看结果 Awake ->OnEnable-> Start ->-> FixedUpdate-> Update  -> LateUpdate ->OnGUI ...

  4. 【Node.js】Event Loop执行顺序详解

    本文基于node 0.10.22版本 关于EventLoop是什么,请看阮老师写的什么是EventLoop 本文讲述的是EventLoop中的执行顺序(着重讲setImmediate, setTime ...

  5. javascript 执行顺序详解

    JavaScript是一种描述 型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行.如果你不能理解javaScript 语言的运行机制,或者简 ...

  6. async/await 执行顺序详解

    随着async/await正式纳入ES7标准,越来越多的人开始研究据说是异步编程终级解决方案的 async/await.但是很多人对这个方法中内部怎么执行的还不是很了解,本文是我看了一遍技术博客理解 ...

  7. Java学习之继承中的执行顺序详解

    代码块(理解) (1)用{}括起来的代码. (2)分类: A:局部代码块 用于限定变量的生命周期,及早释放,提高内存利用率. B:构造代码块 把多个构造方法中相同的代码可以放到这里,每个构造方法执行前 ...

  8. Python装饰器执行顺序详解

    探究多个装饰器执行顺序 装饰器是Python用于封装函数或代码的工具,网上可以搜到很多文章可以学习,我在这里要讨论的是多个装饰器执行顺序的一个迷思. 疑问 大部分涉及多个装饰器装饰的函数调用顺序时都会 ...

  9. javascript运行机制之执行顺序详解

    1.代码块 指的的是有标签分割的代码段. 例如: <script type="text/javascript"> alert("这是代码块一"); ...

随机推荐

  1. 转载一篇关于kafka零拷贝(zero-copy)通俗易懂的好文

    原文地址 https://www.cnblogs.com/yizhou35/p/12026263.html 零拷贝就是一种避免CPU 将数据从一块存储拷贝到另外一块存储的技术. DMA技术是Direc ...

  2. Python Ethical Hacking - BACKDOORS(4)

    REVERSE_BACKDOOR - cd command Access file system: cd command changes current working directory. It h ...

  3. Python Ethical Hacking - WEB PENETRATION TESTING(2)

     CRAWING DIRECTORIES Directories/folders inside the web root. Can contain files or other directories ...

  4. P1092 虫食算（洛谷）

    今天做了一道题,我之前吹牛的时候曾经说:“这个题我觉得深搜剪枝一下就可以了.”. 我觉得我之前说的没错“这个题深搜剪枝亿下,再加点玄学就可以了!” 题目描述 所谓虫食算,就是原先的算式中有一部分被虫子 ...

  5. 太实用了！自己动手写软件——我们的密码PJ器终于完成了

    之前我们完成了密码破解工具的界面,今天我们来看看功能实现吧. 目录 编码 提交——功能实现 开始破解——功能实现 读取密码字典 选择协议并执行破解动作 POP3协议的破解函数 IMAP协议的破解函数 ...

  6. 数据库-SQL查询语言(一）

    SQL数据定义 DDL sql的DDL不仅能定义一组关系,还能定义每个关系的信息,包括: 每个关系的模式 每个属性的取值类型 完整性约束 每个关系的维护的索引集合 每个关系的安全性和权限信息 每个关系 ...

  7. 生态 | Apache Hudi集成Alluxio实践

    原文链接:https://mp.weixin.qq.com/s/sT2-KK23tvPY2oziEH11Kw 1. 什么是Alluxio Alluxio为数据驱动型应用和存储系统构建了桥梁, 将数据从 ...

  8. vue使用select间相互绑定

    让这两个select相互绑定,让roleOptions选取值后,worklist弹出得是roleOptions值 <el-select v-model="postForm.projec ...

  9. 题解 CF997E 【Good Subsegments】

    先将问题进行转化,发现满足\((max-min)-(r-l)=0\)的区间即为好区间. 对于本题这样的统计子区间的问题,先将询问离线,按右端点排序一个一个解决,固定右端点,然后通过数据结构来处理出区间 ...

  10. web自动化 -- Select（下拉选择框操作）

    目标:(现在 select 这种已经很少了.一般都是  ul/li 或者 span/svg) 代码示例: