VUE实例的生命周期

VUE的生命周期主要体现在8个钩子函数上
1、创建
beforeCreate（）创建前，视图view，data模型都未被创建

beforeCreate() {
    console.log('----beforeCreate----')
    console.log(this.msg) //undefined
    console.log(this.$el) //undefined
  },

created（） 创建后，视图view未被创建，data模型被创建，一般对数据进行初始化

created() {
    console.log('----created----')
    console.log(this.msg)	//msg
    console.log(this.$el)	//undefined
  },

2、挂载
beforeMount（） 挂载前，视图view未被真正进行创建，只是进行占位；data模型被创建
在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取。

  beforeMount() {
    console.log('----beforeMount----')
    console.log(this.msg)	//msg
    console.log(this.$el)	//undefined
  },

mounted（） 挂载后，视图view被真正创建并进行数据绑定；data模型被创建

mounted() {
    console.log('----mounted----')
    console.log(this.msg)	//msg
    console.log(this.$el)	//<div id="app"><span model="msg"></span></div>
  },

3、更新
beforeUpdate（）更新前，data模型被更新，view视图未被更新；更新前的准备。只有view上面的数据变化才会触发beforeUpdate和updated，仅属于data中的数据改变是并不能触发。

updated（）更新后，view和data都被更新，更新完成

<template>
  <div id="app">
    <div style="height:50px"
         ref="spanRef">{{msg}}</div>
    <button @click="clickBtn"></button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      msg: 'msg',
    }
  },
  methods: {
    clickBtn() {
      this.msg = 'newMsg'
    },
  },
  beforeUpdate() {
    console.log('beforeUpdate')
    console.log(this.$refs.$el)
    console.log(this.msg) //msg
  },
  updated() {
    console.log('----updated----')
    console.log(this.$refs.$el)

    console.log(this.msg) //msg
  },
}
</script>

4、销毁
beforeDestory（）销毁前，做销毁的准备
destoryed（） 销毁后，销毁完成，对虚拟DOM的解绑，不影响真实DOM