vue生命周期函数created和mouted的区别

Vue的生命周期函数created和mounted的区别如下：
1. created函数是在Vue实例创建之后立即调用的，而mounted函数是在Vue实例挂载到DOM元素上之后调用的。
2. 在created函数中，Vue实例的数据和方法已经初始化完成，但是DOM元素还没有生成，因此无法访问到DOM元素。而在mounted函数中，Vue实例已经挂载到DOM元素上，因此可以访问到DOM元素。
3. 通常情况下，我们在created函数中进行数据的初始化和异步请求的发送，而在mounted函数中进行DOM操作和组件的初始化。

以下是一个示例代码，演示了created和mounted函数的使用：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  created() {
    console.log('created')
    // 在created函数中进行数据的初始化和异步请求的发送
    setTimeout(() => {
      this.message = 'Hello, World!'
    }, 1000)
  },
  mounted() {
    console.log('mounted')
    // 在mounted函数中进行DOM操作和组件的初始化
    this.$nextTick(() => {
      console.log('DOM is ready')
    })
  },
  methods: {
    changeMessage() {
      this.message = 'Hello, China!'
    }
  }
}
</script>