vue2声明周期

vue2声明周期

  beforeCreate() {
    // 创建之前,data和methods的对象还没有初始化，作用：页面重定向
    console.log('beforeCreate');
    console.log(this.msg);//undefined
  },
  created() {
    // 创建之后，data和methods中的数据初始化完成，第一个可以操作data和methods中的数据的生命周期
    // 作用：数据初始化，接口请求
    console.log('created')
    console.log(this.msg)
  },
  beforeMount() {
    // 虚拟dom挂载
    console.log('beforeMount');
    console.log(document.querySelector('#box'));//null
  },
  mounted() {
    // 真实的dom，第一个可以操作dom元素的生命周期
    console.log('mounted');
    console.log(document.querySelector('#box'))
  },
  // 执行0次或更多次
  beforeUpdate() {
    console.log('beforeUpdate')
    // 更新之前，data和页面内的数据还未保持同步，页面中的数据是旧的，data中的数据是最新的
  },
  updated() {
    console.log('updated')
    // 更新之后，data和页面中的数据已经保持一致
  },
  beforeDestroy() {
    console.log('beforeDestroy')
    // 销毁之前，页面还没有真正的销毁
    // 作用：清空页面监听和定时器
  },
  destroyed() {
    console.log('destroyed')
    // 销毁之后
  }