vue的生命周期的详解

一、vue实例的生命周期

• 什么是生命周期：从vue的实例创建、运行到销毁期间，总是伴随着各种事件，这些事件统称为生命周期
• 生命周期钩子：生命周期事件的别名

生命周期钩子=生命周期函数=生命周期事件

• 生命周期的函数分类

创建期间的生命周期函数
（1）beforeCreate()
刚初始化了一个vue空的实例化对象，这个对象身上只有默认的生命周期和默认的事件，其他东西都还没有背创建。
在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有初始化
（2）created()
在created()中，data和methods都已经被初始化好了！
也就是说，如果要调用methods中的方法，或者操作data中的数据，最早只能在created()中操作
（3）beforeMount()
beforeMount执行的时候，模版已经在内存中编译好了，但是还没有挂载到页面中去，此时页面还是旧的
（4）mounted()
内存中的模版已经真实地挂载到了页面中，用户可以看到渲染好的页面了
注意：mounted是实例创建期间最后一个生命周期，当执行完mounted后，就表示实例已经被完全创建好了。此时，组件已经脱离了创建阶段，进入运行阶段。
此时，如果没有其他操作的话，这个实例，就一直在内存中不动
如果要通过某些插件操作页面上的DOM节点，最早要在mounted中进行

// beforeCreate()
<script>
export default {
  data() {
    return {
      totalCount: 0
    }
  },
  methods: {
    start() {
      console.log('this is start')
    }
  },
  beforeCreate() {
    console.log(this.totalCount)   //undefined
    this.start()   //this.start is not a function"
  },
};
</script>

created()

//created()
<script>
export default {
  data() {
    return {
      totalCount: 0
    }
  },
  methods: {
    start() {
      console.log('this is start')
    }
  },
  created() {
    console.log(this.totalCount) //0
    this.start() //this is start
  },
};
</script>

//beforeMount()
<template>
<div>
  <h3 id='text'>{{totalCount}}</h3>
</div>
</template>

<script>
export default {
  data() {
    return {
      totalCount: 0
    }
  },
  methods: {
    start() {
      console.log('this is start')
    }
  },
  beforeMount() {
    console.log(document.getElementById('text').innerText)
    //{{totalCount}}
  },
};
</script>

//mounted()
<template>
<div>
  <h3 id='text'>{{totalCount}}</h3>
</div>
</template>

<script>
export default {
  data() {
    return {
      totalCount: 0
    }
  },
  methods: {
    start() {
      console.log('this is start')
    }
  },
  beforeMount() {
    console.log(document.getElementById('text').innerText)
    //0
  },
};
</script>

运行期间的生命周期函数
注意：beforeUpdate()和updated()这两个事件，会根据data数据的改变，有选择性的进行触发，触发0次到多次，当data数据改变时，才会触发beforeUpdate()
(1)beforeUpdate()
当执行beforeUpdate的时候，页面中的显示的数据，还是旧的，此时data中的数据是新的，页面尚未和最新的数据同步
(2)updated()
当执行updated时候，页面和data数据已经保持同步了，都是最新的

销毁期间的生命周期函数
(1)beforeDestory()
当执行beforeDestory的时候，vue实例就已经从运行阶段到了销毁阶段，此时实例上所有的data和methods以及过滤器等都处于可用的阶段，此时还没有真正执行销毁过程
(2)destroyed()
当执行destroyed()的时候，组件已经完全被销毁了，data和methods以及过滤器等都不可用了

附上vue官方生命周期图：