在 Vue 组件实例的生命周期中，created 钩子与 mounted 钩子各自在什么时机被调用？它们之间有哪些关键差异，这些差异在实际开发中会如何影响我们对初始化逻辑或 DOM 操作的选择？
考察说明
考察对 Vue 生命周期钩子执行时机及各自适用场景的理解。
回答思路
- 【回答框架 1】created 钩子在组件实例创建完成后被同步调用，此时已完成数据观测、属性和方法的运算、watch/event 事件回调的配置，但尚未开始模板编译和挂载，因此 $el 属性尚不可用。
- 【回答框架 2】mounted 钩子在实例完成挂载后被调用，此时模板已渲染为真实 DOM，$el 已绑定，可以安全地访问和操作 DOM 元素，也适合在此进行依赖 DOM 的初始化。
- 【回答框架 3】关键差异在于访问 DOM 与数据初始化：created 适合进行不依赖 DOM 的数据初始化、API 调用或事件监听；mounted 适合进行需要 DOM 的操作，如获取元素尺寸、绑定第三方库等。
- 【回答框架 4】在实际开发中，通常在 created 中请求初始数据以提前加载，在 mounted 中操作 DOM 或启动需要 DOM 的插件。同时，服务端渲染时只有 created 会被调用，因此数据获取逻辑优先放 created。
- 【回答框架 5】注意 mounted 不保证子组件也已全部挂载，若需等待整个视图树渲染完成，应使用 this.$nextTick 或 updated 钩子。
- 【关键点 1】created 在实例创建后、DOM 挂载前触发，此时 $el 不可用。
- 【关键点 2】mounted 在 DOM 挂载完成后触发，可安全操作 DOM。
- 【关键点 3】依赖 DOM 的初始化放在 mounted，不依赖 DOM 的数据请求放在 created。
- 【关键点 4】服务端渲染时仅执行 created，不执行 mounted。
- 【关键点 5】mounted 不保证子组件全部挂载，需要时可结合 $nextTick。
- 【易错点 1】不能在 created 中直接操作 DOM，因为此时元素尚未渲染。
- 【易错点 2】在 mounted 中同步修改数据可能触发额外的更新循环，应避免过度操作或使用异步更新。
- 【易错点 3】混淆 created 与 beforeMount 的时机，created 早于 beforeMount，且 beforeMount 前模板已编译完成。