Vue生命周期

1.生命周期概念

又名生命周期回调函数、生命周期函数、生命周期钩子
钩子函数：每个Vue实例从初始化到销毁的一系列过程中，会触发不同的钩子函数
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
生命周期函数中的 this 指向是vm或组件实例对象

2.生命周期执行顺序

生命周期	描述
beforeCreate	组件实例创建前
created	组件实例创建后
beforeMount	组件实例挂载前
mounted	组件实例挂载后
beforeUpdate	组件数据更新前
updated	组件数据更新后
beforeDestroy	组件实例销毁前
destroyed	组件实例销毁后

3.生命周期详情

beforeCreate：

创建前，此阶段为实例初始化之后，this指向创建的实例，此时的数据观察事件机制都未形成，不能获得DOM节点。
data，computed，watch，methods 上的方法和数据均不能访问。
可以在这加个loading事件。

created：

创建后，此阶段为实例已经创建，完成数据（data、props、computed）的初始化导入依赖项。
可访问 data computed watch methods 上的方法和数据。
初始化完成时的事件写在这里，异步请求也适宜在这里调用（请求不宜过多，避免白屏时间太长）。
可以在这里结束loading事件，还做一些初始化，实现函数自执行。
未挂载DOM，若在此阶段进行DOM操作一定要放在Vue.nextTick()的回调函数中。

beforeMount：

挂载前，虽然得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行。
beforeMount这个阶段是过渡性的，一般一个项目只能用到一两次。

mounted：

挂载，完成创建vm.$el，和双向绑定
完成挂载DOM和渲染，可在mounted钩子函数中对挂载的DOM进行操作。
可在这发起后端请求，拿回数据，配合路由钩子做一些事情。

beforeUpdate：

数据更新前，数据驱动DOM。
在数据更新后虽然没有立即更新数据，但是DOM中的数据会改变，这是vue双向数据绑定的作用。
可在更新前访问现有的DOM，如手动移出添加的事件监听器。

updated：

数据更新后，完成虚拟DOM的重新渲染和打补丁。
组件DOM已完成更新，可执行依赖的DOM操作。
注意：不要在此函数中操作数据（修改属性），会陷入死循环。

activated：

在使用vue-router时有时需要使用<keep-alive></keep-alive>来缓存组件状态，这个时候created钩子就不会被重复调用了。
如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发。

deactivated：

<keep-alive></keep-alive>组件被移除时使用。

beforeDestroy：

销毁前，
可做一些删除提示，如：您确定删除xx吗？

destroyed：

销毁后，当前组件已被删除，销毁监听事件，组件、事件、子实例也被销毁。
这时组件已经没有了，无法操作里面的任何东西了。

3.总结

总结

常用的生命周期钩子

created   异步请求
mounted   异步请求、DOM操作（swiper、echarts、聊天默认滚到底部等等）
updated   监控数据变化进一步DOM操作，例如聊天窗口到底部、订单可视化图表重置等等，切记数据必须页面显示才能监控
destroyed 清理非vue资源防止内存泄露，例如登陆倒计时定时器

关于销毁Vue实例

销毁后借助Vue开发者工具看不到任何信息
销毁后自定义事件会失效，但原生DOM事件依然有效
一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了

vue

<title>引出生命周期</title>
<script type="text/javascript" src="../js/vue.js"></script>

<div id="root">
  <h2 :style="{opacity}">欢迎学习Vue</h2>
  <button @click="opacity = 1">透明度设置为1</button>
  <button @click="stop">点我停止变换</button>
</div>

<script type="text/javascript">
  Vue.config.productionTip = false
  new Vue({
    el: '#root',
    data: {
      opacity: 1
    },
    methods: {
      stop() {
        this.$destroy()
      }
    },
    // Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
    mounted() {
      console.log('mounted', this)
      this.timer = setInterval(() => {
        console.log('setInterval')
        this.opacity -= 0.01
        if (this.opacity <= 0) this.opacity = 1
      }, 16)
    },
    beforeDestroy() {
      clearInterval(this.timer)
      console.log('vm即将驾鹤西游了')
    },
  })
</script>

Vue生命周期 ​

1.生命周期概念 ​

2.生命周期执行顺序 ​

3.生命周期详情 ​

3.总结 ​

Vue生命周期

1.生命周期概念

2.生命周期执行顺序

3.生命周期详情

3.总结