面试题：Vue中created和mounted钩子函数的区别

Question

在Vue组件的生命周期里，created和mounted钩子函数都较为常用，请阐述它们的触发时机以及应用场景的差异。

Answer 1

created钩子函数

• 触发时机：在实例创建完成后被立即同步调用。此时，实例已经完成了数据观测、属性和方法的运算，$el属性还未创建。
• 应用场景：
  • 数据初始化和获取：比如从本地存储中读取用户设置，或者在组件渲染前从服务器获取一些基本配置数据。
  • 事件绑定：如果组件需要在创建后就绑定一些全局事件，可以在created中完成。

mounted钩子函数

• 触发时机：在挂载完成后调用，此时组件的$el已经创建并插入到了DOM中。
• 应用场景：
  • DOM操作：当需要直接操作DOM元素时，如初始化第三方插件（像基于DOM的图表库、富文本编辑器等），因为此时DOM已经存在。
  • 获取DOM元素尺寸：若要获取组件元素的尺寸或位置信息，mounted钩子函数是合适的地方，因为此时DOM已渲染完成。