Vue 基础面试题, 第一次加载 Vue 页面时会触发哪些生命周期钩子?

Step 1

Q:: 第一次加载 Vue 页面时会触发哪些生命周期钩子？

A:: 在 Vue 中，第一次加载页面时会依次触发以下生命周期钩子： 1. beforeCreate：组件实例刚刚被创建，此时数据观察机制尚未启动，data、methods、computed 和 watch 上的数据还未被初始化。 2. created：组件实例已经创建完成，属性已经绑定，但 DOM 尚未生成，$el 属性还不可用。 3. beforeMount：在挂载开始之前调用，相关的 render 函数首次被调用。 4. mounted：实例被挂载后调用，此时组件的 DOM 已经生成，$el 属性可用。 这些钩子函数让开发者能够在组件的不同阶段执行特定的逻辑，如初始化数据、访问 DOM 等。

Step 2

Q:: 在什么情况下你会使用 beforeCreate 和 created 钩子？

A:: 通常在 beforeCreate 钩子中不建议放置复杂逻辑，因为此时的组件实例还未完全初始化。但在 created 钩子中，数据已经可以使用，适合用来进行依赖数据的初始化、发起网络请求或设置监听器等操作。

Step 3

Q:: Vue 的 computed 属性和 watch 属性有什么区别？

A:: computed 属性是基于其依赖的属性进行缓存的，当其依赖的属性值发生变化时，才会重新计算值。适合用于依赖多个数据进行复杂计算的场景。watch 属性则是监听数据的变化，当数据变化时执行特定的操作，适合用于需要在数据变化时执行异步操作或多个逻辑操作的场景。