vue生命周期

beforeCreate（创建前）

1. el和data还没初始化
2. 无法访问methods， data， computed等上的方法和数据

created（创建完成）

1. 可以访问methods， data， computed等上的方法和数据
2. data已经初始化，el没有
3. 挂载阶段还没开始，el属性不可见

beforeMount（挂载前）

1. 挂载开始之前被调用
2. 编译模板，把data里面的数据和模板生成html，完成了el和data 初始化
3. 数据和模板还没有被挂载到页面上

mounted（挂载完成）

1. 挂载完成，模板中的HTML已经渲染到页面上了
2. mounted只会执行一次

beforeUpdate（更新渲染前）

在数据更新之前被调用，发生在虚拟DOM重新渲染

updated（更新渲染完成）

数据更改导致地虚拟DOM重新渲染，调用时，组件DOM已经更新

beforeDestroy（销毁前）

1. 在实例销毁之前调用，实例仍然完全可用
2. 这一步还可以用this来获取实例
3. 一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件

destroyed（销毁后）

1. 在实例销毁之后调用
2. 调用后，所以的事件监听器会被移出
3. 所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用

案例

<template>
    <div ref="test">
       生命周期
       <input type="text" v-model="value">
       {{value}}
    </div>
</template>

<script>

export default {
  data () {
    return {
      value: ''
    }
  },
  beforeCreate () {
    console.log('beforeCreate创建前')
    console.log(this.$el)
    console.log(this.$data)
  },
  created () {
    console.log('created创建完成')
    console.log(this.$el)
    console.log(this.$data)
  },
  beforeMount () {
    console.log('beforeMount挂载前')
    console.log(this.$el)
    console.log(this.$data)
  },
  mounted () {
    console.log('mounted挂载完成')
    console.log(this.$el)
    console.log(this.$data)
  },
  beforeUpdate () {
    console.log('beforeUpdate更新渲染前', this.$refs.test.innerHTML)
  },
  updated () {
    console.log('updated更新渲染完成', this.$refs.test.innerHTML)
  },
  beforeDestroy () {
    console.log('beforeDestroy')
  },
  destroyed () {
    console.log('destroyed')
  }
}
</script>

输出结果：

beforeCreate创建前
undefined
undefined

created创建完成
undefined
{__ob__: Observer}

beforeMount挂载前
undefined
{__ob__: Observer}

mounted挂载完成
<div>​…​</div>​
{__ob__: Observer}

如果input中的输入框变化时，则输出：

beforeUpdate更新渲染前 
   生命周期
   <input type="text">
   

updated更新渲染完成 
   生命周期
   <input type="text">
   1