vue created和mounted

// Vue 组件的 created 和 mounted 生命周期钩子示例

new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  created() {
    // created 钩子在实例创建完成后被调用
    // 此时，Vue 实例已完成以下初始化：
    // 数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
    // 然而，挂载阶段还没开始，$el 属性目前不可见。

    console.log('created 钩子被调用');
    console.log('当前元素还未挂载到 DOM 中:', this.$el); // 输出 null 或 undefined
  },
  mounted() {
    // mounted 钩子在挂载阶段完成之后被调用
    // 此时，Vue 实例已完成以下操作：
    // 模板编译/挂载，此时 $el 已替换为真实的 DOM 元素。

    console.log('mounted 钩子被调用');
    console.log('当前元素已挂载到 DOM 中:', this.$el); // 输出真实的 DOM 元素
  }
});

解释说明：

• created：这个钩子在实例创建完成后立即调用。此时，Vue 实例已经完成了数据观测、属性和方法的运算以及事件回调的设置，但还没有挂载到 DOM 上，所以 this.$el 还不可用。

• mounted：这个钩子在挂载阶段完成之后调用。此时，Vue 实例已经将模板编译并挂载到了 DOM 上，this.$el 已经可以访问到真实的 DOM 元素了。