Vue2 生命周期

beforeCreate() {
  console.log('beforeCreate')
  console.log(this.message) // undefined
}

created() {
  console.log('created')
  console.log(this.message) // 可以访问
  // 适合进行 API 调用
  this.fetchData()
}

beforeMount() {
  console.log('beforeMount')
  console.log(this.$el) // undefined
}

mounted() {
  console.log('mounted')
  console.log(this.$el) // 可以访问 DOM
  // 适合进行 DOM 操作
  this.$refs.input.focus()
}

beforeUpdate() {
  console.log('beforeUpdate')
  console.log('DOM 还未更新')
}

updated() {
  console.log('updated')
  console.log('DOM 已更新')
}

beforeDestroy() {
  console.log('beforeDestroy')
  // 清理定时器、取消订阅等
  clearInterval(this.timer)
}

destroyed() {
  console.log('destroyed')
}

created() {
  this.fetchUserData()
},
methods: {
  async fetchUserData() {
    const response = await fetch('/api/user')
    this.userData = await response.json()
  }
}

mounted() {
  this.$refs.chart.init()
  this.initThirdPartyLibrary()
}

data() {
  return {
    timer: null
  }
},
mounted() {
  this.timer = setInterval(() => {
    this.updateTime()
  }, 1000)
},
beforeDestroy() {
  if (this.timer) {
    clearInterval(this.timer)
  }
}

mounted() {
  window.addEventListener('resize', this.handleResize)
},
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize)
}