前端经典面试题合集, Vue 中 computed 和 watch 区别?分别适用于什么场景?
前端经典面试题合集, Vue 中 computed 和 watch 区别?分别适用于什么场景?
QA
Step 1
Q:: Vue 中 computed 和 watch 区别？分别适用于什么场景？
A:: 在 Vue.js 中，computed 和 watch 都是用于监听和处理数据变化的方法，但它们有不同的用途和适用场景。
1. computed：
- 计算属性，基于依赖的数据进行缓存，只有在依赖的数据发生变化时才会重新计算。
- 适用于需要依赖多个属性计算出一个新值的场景，例如表单的总和、复杂逻辑的结果等。
2. watch：
- 侦听器，观察和响应数据的变化，可以进行异步操作或在数据变化时执行特定的逻辑。
- 适用于监视某个数据的变化并执行特定操作的场景，例如监听路由参数的变化进行数据请求等。
Step 2
Q:: Vue 中的生命周期钩子函数有哪些？各自的作用是什么？
A:: Vue 的生命周期钩子函数包括：
1. beforeCreate：实例初始化之后，数据观测和事件配置之前调用。
2. created：实例已经创建完成，数据观测和事件配置已经完成，但未挂载 DOM。
3. beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。
4. mounted：el 被新创建的 vm.$el 替换，并挂载到实例上。
5. beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。
6. updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。
7. beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
8. destroyed：实例销毁后调用。
Step 3
Q:: Vue 中的父子组件如何进行通信？
A:: Vue 中父子组件的通信主要通过 props 和事件机制来实现。
1. 父组件向子组件传递数据：通过在子组件上绑定 props。
2. 子组件向父组件传递数据：通过在子组件中使用 $emit 触发事件，父组件监听该事件。
3. 使用 provide/inject：在父组件中使用 provide 传递数据，在子组件中使用 inject 接收数据，适用于多层级组件传递数据。
Step 4
Q:: Vue 中的 v-if 和 v-show 有什么区别？
A:: v-if 和 v-show 都是用于控制元素的显示和隐藏，但有一些关键区别：
1. v-if：
- 条件渲染，元素在条件为 false 时完全不渲染。
- 有更高的切换开销，因为每次切换都会销毁和重建 DOM 元素。
- 适用于在运行时很少改变条件的场景。
2. v-show：
- 条件展示，元素始终被渲染，只是基于条件来控制 display 属性。
- 切换开销较低，因为只是在 CSS 层面进行切换。
- 适用于频繁切换条件的场景。