vue生命周期爬坑，从不懂到懂（初版）

初学，写的不对的地方，还请大家批评指教，不胜感激。

根据实际应用，和前辈们的文档，开始学习研究。

一些其他的细节放在这里不合适，写在另一篇文章里了。vue调用顺序(初学版) index.html → main.js → app.vue → index.js → components/组件 测试_似水流年，举重若轻-CSDN博客关于它是怎么调用运作的：https://blog.csdn.net/zbl744949461/article/details/86134414一. 准备工作：1.下载webstorm，安装vue。2.创建项目，cd到要放项目的文件夹下 vue init webpack vue_test3.安装各种包npm install4.运行 cd vue_te...https://blog.csdn.net/zbl744949461/article/details/80476888开发5年，晋级篇是这个链接

从零开始搭建vue项目 （晋级篇） npm run dev npm run build_似水流年，举重若轻-CSDN博客目标：用上之前开发过的所有vue项目中精华的部分。分几大块搭建。https://blog.csdn.net/zbl744949461/article/details/110039452

 但总体思路都在这，不需要的，看这篇就够了。

先看看官网给出的图：

一.new Vue()

  ✿ 假设，你用vue的脚手架（vue-cli）生成的项目。如果没有，就在html文件里引入vue  （下面是在脚手架里执行的程序）

       介绍 — Vue.js

  ✿ 假如，我们在index.html中建一个id为app的div

       

 ✿ 在main.js中新建一个实例。main.js和App.vue同级，在main.js中引入App.vue。

      

      

      注：因为import了App，所以要在components中写上，不写就不应用，同时，template也要写相同的名字命名的标签。

      关于命名具体在细节文章的import和export里。

        

✿ 官网上对el的解释如下，按上面的代码，可以将这个实例挂载在id="app"的DOM元素上。但往下看

✿ 假如render和template属性都不存在，id="app"的div中的内容会被提取出来当模板，我们上面写的div中没有内容，

    而且，因为有template属性存在，所以用app.vue的内容 替换 挂载的元素，也就是替换id="app"的div。

    挂载元素没有内容，也没有插槽slot，所以直接就替换了。

  

✿ App.vue的内容 我们恰好写了个id="app"的div，用这个div替换了index.html中的id="app"的div。

    这里这个script写的是多余的，没有用，可以删掉。

    

    注：template标签内只能有一个父集，意思就是:

    这样写可以

    <template>

           <div>

                      <div class="a"> ...</div>

                       <div class="b"> ...</div>

           </div>

   </template>

   这样写不行，只是template标签里写了2个父集

<template>

            <div class="a">... </div>

            <div class="b">... </div>

   </template>

✿ <router-view>中的内容是路由加载的，加载内容在router/index.js中配置，我们默认让它加载index.vue，加载别的也行。

    

✿ 准备工作都做完了，开始学生命周期。

二.init

✿ 第一个init 是怎么执行的，实例初始化都做了什么？  （这里就到研究源码了，可以看看vue的目录结构）

    打开node_modules/vue/src/core/instance/index.js  和 init.js  (core/instance目录是用来实例化vue对象的。)

    在index.js中 导入了init.js中的initMixin函数 在vue初始化时，执行在init.js中定义的vue的属性_init()这个函数初始化对象。

    

    在init.js中   https://www.jb51.net/article/127406.htm   flow类型检查    浏览器工作原理：浅析栈空间和堆空间 - 数据是如何存储的？ - 古兰精 - 博客园

 ✿  初始化完成，开始执行生命周期。

三.beforeCreate

四.beforeCreate 和 created之间

在init.js 中 

在 beforeCreate和created之间有 initState 方法，这个方法在 state.js中。

这里看出vue初始化的顺序 ，Props，methods，data 和 computed 的初始化 都是在 beforeCreated 和 created 之间完成的。

https://segmentfault.com/q/1010000010364198

watch 在 mounted 之前

父子组件生命周期的执行过程：vue父子组件&继承组件的生命周期以及应用_程序员秋风的博客-CSDN博客_vue 父子组件生命周期