Vue2.x之生命周期详解

生命周期也叫钩子。

我在官网找了一张图，千万不要觉得这张图好复杂就不去认真的分析了，反而去看别人写的博客，反而越整越懵。

就下面这张图，为大家详解生命周期，然后贴出实例代码。

生命周期说白了就是一套流程，而这套流程里面的方法就会有先后顺序的执行（调用了就执行，不调用就不会执行），整个流程分为三个步骤。

请看下图：

一、分三步流程解读

1、初始化显示

new Vue() 表示创建一个Vue实例，这里假设vm是新建的实例。

按照图上的流程是：beforeCreate() ➡ created() ➡ beforeMount() ➡ mounted()

2、更新状态

beforeUpdate() ➡ updated()

3、销毁Vue实例

vm.$destory()

beforeDestory() ➡ destoryed()

beforeDestory(): 做收尾工作（就是在结束之前做一些事情，如: 清除定时器）。

二、常用的生命周期方法

mounted，初始化之后就会立即调用。

created()/mounted()：发送ajax请求, 启动定时器等异步任务。

三、完整流程解读

① created表示已经创建结束了（过去式嘛），再创建完成之前会做一些准备工作（比如说，监视数据，数据到最后都会实现数据绑定的，会用到set用于监视数据的变化），在做准备工作之前会先调用beforeCreate()。

② created之后会判断是否存在“el”的配置，这里会涉及到一个自动挂载页面和手动挂载页面的概念，如果有el的话会自动挂载，指定了el之后，就指定了Vue管理的一片区域，假设没有指定区域的话，那vue为谁服务呢？当然谁都不服务了。所以另外一种方式，就需要手动调用 vm.$mount(el) 指定一片区域，基本上是不会这么做的。

③ 接着执行到判断我们是否有 “template”这个配置，如果没有就直接编译 el 这篇区域的HTML代码作为模板。要注意Vue转换成的HTML代码是没有直接挂载到页面上去的，它在内存里编译好了以后，才会全部挂载到页面上显示。在挂载之前，就有beforeMount()这个函数，挂载完成之后调用Mounted()。

④ 下面来到“更新”的一部分，挂载数据之后在页面更新之前会调用beforeUpdate()，页面发生变化之后会调用Updated()。

⑤ 最后执行到“死亡” ，当调用vm.$destory()的时候，所有的组件都会移除，在移除之前会调用beforeDestory() 来做一些收尾的工作，比如说前面也提到了清除定时器，死亡之后再调用destory()。

完整生命周期实例

<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>生命周期</title></head>
  
  <body>
    <div id="test">
      <button @click="destroyVue">destory vue</button>
      <p v-if="isShow">Hello,world!</p></div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">new Vue({
        el: '#test',
        data: {
          isShow: true
        },
        beforeCreate() {
          console.log('beforeCreate()')
        },
        created() {
          console.log('created()')
        },
        beforeMount() {
          console.log('beforeMount()')
        },
        mounted() {
          console.log('mounted()')
          // 执行异步任务
          this.intervalId = setInterval(() = >{
            console.log('-----') this.isShow = !this.isShow
          },
          1000)
        },
        beforeUpdate() {
          console.log('beforeUpdate()')
        },
        updated() {
          console.log('updated()')
        },
        beforeDestroy() {
          console.log('beforeDestroy()')
          // 执行收尾的工作
          clearInterval(this.intervalId)
        },
        destroyed() {
          console.log('destroyed()')
        },
        methods: {
          destroyVue() {
            this.$destroy()
          }
        }
      })</script>
  </body>

</html>

转载至： https://blog.csdn.net/qq_41647999/article/details/85036981