vue mounted和created的区别

// Vue 组件示例代码，展示 created 和 mounted 的区别

new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  created() {
    // 在 created 钩子中，组件实例已经创建完成，data 和 methods 已经初始化，但 DOM 还没有生成。
    console.log('created:', this.$el); // 输出 null，因为 DOM 还没有生成
    console.log('Message in created:', this.message); // 可以访问 data 中的数据
  },
  mounted() {
    // 在 mounted 钩子中，DOM 已经生成，可以操作 DOM 元素。
    console.log('mounted:', this.$el); // 输出真实的 DOM 元素
    console.log('Message in mounted:', this.message); // 同样可以访问 data 中的数据
    this.$el.style.color = 'red'; // 操作 DOM
  }
});

解释说明：

• created：在 created 钩子中，Vue 实例已经完成了数据观测 (data observation)、属性和方法的运算、watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见（即还没有生成真实的 DOM）。
• mounted：在 mounted 钩子中，Vue 实例已经完成了 DOM 的挂载，此时可以通过 this.$el 访问到真实的 DOM 元素，并且可以对其进行操作。