初入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. someone you loved 歌词翻译

    I'm going under and this time I fear there's no one to save me 我要放弃了,这一次我怕没有人可以拯救我. This all or noth ...

  2. 基于python的自动化测试简介【十年从业大佬】

    一.自动化测试包括以下几个方面: 1. 常用测试工具: (1)QTP:主要用于回归测试和测试同一软件的新版本 (2)Robot Framwork:python编写的功能自动化测试框架,具有良好的可扩展 ...

  3. 性能测试必备知识（2）- 查看 Linux 的 CPU 相关信息

    做性能测试的必备知识系列,可以看下面链接的文章哦 https://www.cnblogs.com/poloyy/category/1806772.html 查看系统 CPU 信息 cat /proc/ ...

  4. 关于node-sass安装失败问题

    在进行Vue开发中npm run dev报错,按照提示尝试进行npm以及cnpm安装均失败 解决办法:npm uninstall node-sass卸载模块 指定淘宝镜像源安装 npm i node- ...

  5. Learning in the Frequency Domain 解读

    论文:Learning in the Frequency Domain, CVPR 2020 代码:https://github.com/calmevtime/DCTNet 实际的图像尺寸比较大,无法 ...

  6. 一个文本框的各项说明，包括类似html的table

    https://www.cnblogs.com/zhqiux/archive/2013/09/03/3298654.html

  7. springboot项目部署到tomcat步骤以及常见问题

    ------------恢复内容开始------------ 本文分为两个部分,一,是打包的步骤,二,是我项目中所遇到的问题以及解决方法 一. 打包为war包步骤 1.修改打包方式为war 在pom. ...

  8. JS控制语句及小练习

    一.控制语句 判断: ①if() {} ; if(){}else{} ; if(){}else if{};…… ② switch(){ case "": break; } 循环: ...

  9. git命令常用操作

    第一步:拉取git上的文件(git clone 远程仓库地址) 第二步:在主目录下运行git base here,执行git status 第三步:添加文件到本地仓库(git add 文件)之后,再次 ...

  10. python学习笔记1 -- 面向对象编程类和实例

    由于之前有一定基础,所以python中的类的概接受的比较快,与其他语言一样, python也是通过类来进行事务的抽象,一切皆对象,要不然怎么说程序员不缺对象呢. 言归正传,python中类的声明是cl ...