Vue声明周期

export default {
  name: "lifeCycle",
  data(){
    return{
      msg:'hello',
      value:''
    }
  },
  // 创建之前，data和methods中的数据还没有初始化，获取不到data和methods中的数据
  // 页面重定向
  beforeCreate() {
    console.log('beforeCreate')
    console.log(this.msg)
  },
  // 创建之后，第一个可以操作data和methods的生命周期
  // 数据初始化 接口请求
  created() {
    console.log('created')
    console.log(this.msg)

    this.msg = 'hi'
  },
  // 创建之前 虚拟DOM挂载
  beforeMount() {
    console.log('beforeMount')
    // console.log(1111111)
  },
  // 创建之后 真实的Dom
  // 第一个可以操作DOM元素的生命周期
  mounted() {
    console.log('mounted')
    document.getElementById('box').style.color = 'red'
  },
  // 执行0次或者无数次
  // 更新之前，data中的数据是最新的，页面中的数据是旧的，还未保持同步
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  // 更新之后，data和页面中的数据都是最新的。
  updated() {
    console.log('updated')
  },
  // 销毁之前 页面还未销毁
  // 清空定时器和页面监听
  beforeDestroy() {
    console.log('beforeDestroy')
  },
  // 销毁之后
  destroyed() {
    console.log('destroyed')
  }

}
</script>