Vue生命周期钩子函数浅析

beforeCreate () {
    // 创建前,还不能访问data与methods
    window.console.log(this.xxx)
  },
  created () {
    this.intervalTime = setInterval(() => {
      window.console.log(123)
    })
    // 创建后,可以访问data与methods,但是还不能访问vue渲染后的dom
    window.console.log('created', this.$refs.h1)
    // 一般在created里发请求获取数据
  },
  beforeMount () {
    // 渲染前,还是不能访问vue渲染后的dom,读取了需要渲染的dom,知道在哪个响应位置渲染,但是还没有渲染
    window.console.log('beforeMount', this.$refs.h1)
  },
  mounted () {
    // 渲染后,可以访问vue渲染后的dom,进入页面的dom操作
    window.console.log('mounted', this.$refs.h1)
  },
  beforeUpdate () {
    window.console.log('beforeUpdate')
    // 更新前,vue页面上使用的相关数据已修改,但是还没有完成相应渲染
  },
  updated () {
    window.console.log('updated')
    // 更新后,vue页面上使用的相关数据已修改,且已完成相应渲染
  },
  beforeDestroy () {
    // 销毁前,还没有销毁,准备销毁,什么都可以访问,往往用于一些善后工作
    // clearInterval(this.intervalTime)
  },
  destroyed () {
    // 销毁后,中断html与js联系(取消渲染),它还是可以访问data与methods
  },
  // 1:特点   2:使用场景  3:常用哪几个生命周期,为什么其它生命周期不怎么用
  activated () {
    // 激活时(显示时),第一次执行是在mounted之后执行,后面组件让缓存了,再次显示时,它会再次执行
    window.console.log('activated')
  },
  deactivated () {
    // 离开时(隐藏时),组件让缓存了,当我们切换路由离开(隐藏)时,它会执行
    window.console.log('deactivated')
    clearInterval(this.intervalTime)
  }