Vue 进阶面试题, Vue 中子组件和父组件钩子的执行顺序是什么?

Step 1

Q:: Vue 中子组件和父组件钩子的执行顺序是什么？

A:: 在 Vue.js 中，父组件和子组件的生命周期钩子函数执行顺序是有规律的。通常情况下，钩子的执行顺序如下：

1. 父组件的 beforeCreate 2. 父组件的 created 3. 父组件的 beforeMount 4. 子组件的 beforeCreate 5. 子组件的 created 6. 子组件的 beforeMount 7. 子组件的 mounted 8. 父组件的 mounted

在销毁阶段，顺序如下：

1. 父组件的 beforeDestroy 2. 子组件的 beforeDestroy 3. 子组件的 destroyed 4. 父组件的 destroyed

这个顺序可以帮助开发者在组件创建和销毁的过程中正确地执行代码，避免数据和 DOM 的错误操作。

Step 2

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

A:: computed 和 watch 都是 Vue.js 中用于监听和响应数据变化的机制，但它们有不同的应用场景。

1. computed：用于依赖于其他数据的计算属性，结果会被缓存，只有在依赖的数据变化时才会重新计算。因此，适合用于复杂计算或依赖于多个数据源的场景。

2. watch：用于观察和响应某个数据的变化，可以执行异步操作或在数据变化时执行副作用操作。适合处理需要在数据变化时执行特定逻辑的场景，如请求数据或手动操作 DOM。

Step 3

Q:: Vue 中 v-if 和 v-show 的区别是什么？

A:: v-if 和 v-show 都是用于控制元素显示与隐藏的指令，但它们的工作方式有所不同。

1. **v-if**：按条件进行真正的条件渲染，只有在条件为真时才会渲染该元素，并且在条件为假时，元素会从 DOM 中移除。适合在需要频繁切换显示状态的场景下使用。

2. **v-show**：简单地通过 CSS 的 display 属性来控制显示与隐藏。元素总是会被渲染和保留在 DOM 中，只是通过 display 的设置来控制是否显示。适合在元素需要频繁显示和隐藏的场景下使用。