Vue基础语法（四）

vue的生命周期钩子函数

所有的生命周期钩子自动绑定this到上下文实例中，因此可以访问数据对property和方法进行运算，这意味着不蹦使用箭头函数来定义一个生命周期方法。参考官方文档，生命周期图

生命周期钩子一共有十一个，这里只写八个

<template>
  <div></div>
</template>
<script>
export default {
  //生命周期函数就是vue实例再某一时间点会自动执行的函数
  data() {
    return {}
  },
  components: {},
  methods: {},
  beforeCreate() {
    console.log('beforecreate')
  },
  created() {
    console.log('created')
  },
  beforeMount() {
    //被执行时页面还没有被渲染
    console.log(this.$el)
    console.log('beforeMount')
  },
  mounted() {
    //被执行的时候页面已经被渲染完毕了
    console.log(this.$el)
    console.log('mounted')
  },
  beforeDestroy() {
    //当组件被销毁时才会触发
    console.log('beforeDestory')
  },
  destroyed() {
    //当组件被完全销毁时会触发
    console.log('detory')
  },
  beforeUpdate() {
    //当数据发生改变还没被重新渲染之前执行
    console.log('beforeUpdate')
  },
  updated() {
    //当数据发生改变被重新渲染之后执行
    console.log('updated')
  }
}
</script>