本文链接： https://blog.csdn.net/u013254183/article/details/99709143

本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766

前面9篇文章基本上完成了vue 静态页面的入门，包括列表展示，路由动态加载菜单，echarts图表的一些使用，后面会结合后台，实现登录，退出，以及日志记录，动态增删改查一些功能。
作者通过自身的学习，以及在网上查阅的资料，对VUE的生命周期也有一定的了解，下面就把一些学习笔记分项给大家

（一）生命周期

从Vue实例开始创建、运行、变化、到销毁结束，这期间所发生的一切事物统称为生命周期！
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

创建期间的生命周期函数：

beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始编译模板
beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示

运行期间的生命周期函数：

beforeUpdate：状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
updated：实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

销毁期间的生命周期函数：

beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

这是官方给的vue 全生命周期的原理图，下面我们来看看这每一步到底发生了什么，页面又是如何一步步渲染出来的。
在这里插入图片描述

（二）new Vue()

在beforeCreate 之前就干了一件是，就是new Vue（），创建了一个空的实例对象，里面什么都没有,data和methods都还没有初始化

（三）beforeCreate

在这个生命周期之间，进行初始化事件，进行数据的观测，this指向创建的实例；
可以在这里加个loading事件；
data computed watch methods这4个方法和数据均不能访问，这4个是在created里面初始化的

（四）created

在这一阶段里还是发生了很多事情的，我们顺着上面的原理图往下走，
Has el option ? 首先会判断是否有el选项，如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该实例上调用vm.$mount(el)，也就是动态引入了el
Has tamplate option ？判断是否有template模板

如果如果vue实例对象中有template参数选项，则将其作为模板编译成render函数
如果没有template选项，则将外部html作为模板编译
template中的模板优先级要高于outer html的优先级

我们来看一段代码

<body>
  <div id="app">
    <h1>{{msg}},这里是outer html生成的html</h1>
  </div>
</body>
<style></style>
<script>
  var app = new Vue({
    el:"#app",
    template:"<h1>{{msg}},这里是template生成的html</h1>",
    render:function (createElement) {
      return createElement("h1","hello,这里是render生成的html")
    },
    data:{
      msg:'hello'
    }
  })
</script>

这段代码的最终结果render里面的html会渲染到页面，因为render的优先级是最高的；
然后把render函数注释掉会是什么效果呢？
结果就是template里面的html会渲染到页面里，因为template会被当做模板编译成render函数；
那如果把template和render函数都注释掉呢会是什么效果？
结果就是 “{{msg}},这里是outer html生成的html“ 这里会被渲染到页面
综合排名优先级：render函数>template选项>outer Html

这个阶段完成数据(data props computed)的初始化导入依赖项。
可访问data computed watch methods上的方法和数据
未挂载DOM,不能访问 $el,$ ref为空数组
可在这结束loading，还做一些初始化，实现函数自执行,
可以对data数据进行操作，可进行一些请求，请求不易过多，避免白屏时间太长。
若在此阶段进行的 DOM 操作一定要放在 Vue.nextTick() 的回调函数中

（五）beforeMount

这个阶段是给vue实例对象添加$el成员，并且替换掉挂在的DOM元素。beforeMount之前el还是undefined。

扫描二维码关注公众号，回复： 7657859 查看本文章

（六）mounted

我们可以看到在mounted之前{{msg}}，等到mounted钩子函数中的时候挂载已完成，
所以挂载元素中显示的是msg=hello的值，可以看到这个时候数据已经完成的双向绑定，
完成挂载DOM 和渲染;可在mounted钩子对挂载的dom进行操作，
即有了DOM 且完成了双向绑定可访问DOM节点，$ref，ajax/http
可在这发起后端请求，拿回数据，配合路由钩子做一些事情；
可对DOM 进行操作等等

（七）beforeUpdate

当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，当数据改变后调用beforeupdata，当渲染完成后调用updated钩子函数。

（八）updated

数据发生变化，完成虚拟DOM的重新渲染；
组件DOM 已完成更新；
可执行依赖的dom 操作；
注意：不要在此函数中操作数据，会陷入死循环的。

（九）beforeDestroy

钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
可做一些删除提示，如：你确认删除XX吗？
可用于销毁定时器，解绑全局时间，全局对象，销毁插件对象等等

（十）destroyed

在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

（十一）keep-alive

keep-alive标签包裹的组件在它们第一次被创建的时候就被缓存下来。与此相关的有两个生命周期钩子函数：activated 和 deactivated。当组件在内被切换时，activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

activated:在组件被激活时调用，在组价第一次渲染时也会被调用，之后每次keep-alive激活时被调用。
deactivated:在组件被停用时调用。

注意：只有组件被 keep-alive 包裹时，这两个生命周期才会被调用，如果作为正常组件使用，是不会被调用的。

（十二）vue-router

vue-router路由，它也有类似于生命周期钩子的函数，允许我们在路由变化的不同阶段进行一些操作，官网叫做导航守卫，本质也是在路由变化的过程中添加钩子函数。
路由组件内可以直接定义路由导航守卫

  beforeRouteEnter (to, from, next) {
    # 在导航确认前被调用,即将挂载的新组件还没被创建。
    # 不能获取组件实例 `this`
    # 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    # 在当前路由改变，但是该组件被复用时调用
    # 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    # 导航离开该组件的对应路由时调用
    # 可以访问组件实例 `this`
  }

beforeRouteEnter 守卫不能访问this，但是我们可以传递给next方法一个回调，来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了。
每个守卫方法接收三个参数：

to:即将要进入的目标路由对象
from:当前导航正要离开的路由
next:function:一定要调用该方法来resolve钩子函数，否则程序将不许继续执行下去。

附上手写中文版Vue生命周期原理图
在这里插入图片描述
参考博文
vue官方文档
 详解vue生命周期
 包你理解—vue 的生命周期
 Vue生命周期浅析

到这边文章为止，所有的Vue部分告一段落，后面是后台部分，数据库，数据交互等等，前后台融合

上一篇：Spring Boot Vue Element入门实战（九）router路由配置
 下一篇：Spring Boot Vue Element入门实战（十一）后端SpringBoot服务搭建
 点击这里返回目录

程序人生，更多分享请关注公众号

源代码下载

关注上面公众号，回复源码即可获取gitbug/gitee下载地址

Spring Boot Vue Element入门实战（十）Vue生命周期