浅谈一下Vue生命周期中mounted和created的区别

下面我来详细讲解一下“浅谈一下Vue生命周期中mounted和created的区别”的完整攻略。

什么是Vue生命周期

Vue生命周期是指Vue实例从创建到销毁期间所经历的所有状态及操作，包括创建、挂载、更新、渲染等一系列过程。Vue的生命周期一共分为8个阶段：创建阶段（beforeCreate、created）、挂载阶段（beforeMount、mounted）、更新阶段（beforeUpdate、updated）、卸载阶段（beforeDestroy、destroyed），其中beforeCreate和created是创建阶段，beforeMount和mounted是挂载阶段。

mounted和created的区别

1. created
   created是Vue实例被创建完成后的状态，在此阶段已完成了数据观测、属性计算、methods方法绑定，但DOM节点并未被创建，也无法访问到DOM操作。常见的用法是在这个阶段中处理一些数据的初始化和异步请求，也可以在此阶段中注册全局事件。

例如：

// 异步请求示例
created() {
  axios.get('https://api.example.com/data').then(res => {
    this.dataList = res.data
  })
}

// 注册全局事件示例
created() {
  EventBus.$on('event', this.eventHandler)
}

1. mounted
   mounted是Vue实例挂载到页面完成后的状态，此时Vue实例的DOM节点已经生成，可以进行DOM操作，也可以直接访问DOM节点。经常用于依赖外部库的操作，比如Google Maps的初始化、动态设置元素高度宽度、访问子组件等。

例如：

// Google Maps 初始化示例
mounted() {
  const map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  })
}

// 动态设置元素高度示例
mounted() {
  this.$nextTick(() => {
    this.$refs.list.style.height = this.$refs.list.offsetHeight + 'px'
  })
}

// 访问子组件示例
mounted() {
  console.log(this.$refs.childComponent.foo)
}

总结

在Vue生命周期中，created和mounted是属于不同的阶段，其主要区别在于DOM节点的生成和操作时机不同，created用于数据的初始化和异步请求，以及注册全局事件等。而mounted则用于访问DOM节点并进行DOM操作，比如依赖外部库的操作、动态设置元素高度宽度、访问子组件等。