前端八股整理（Vue 02）｜组件通信、生命周期、v-if 与 v-show

前端八股整理（Vue 02）｜组件通信、生命周期、v-if 与 v-show

1.讲讲VUE中的组件通信

组件通信的基本原则是单向数据流,最基础的是父子通信：父传子通常通过 props，在 Vue3 里一般用 defineProps 接收,子组件接收父组件传过来的参数.子传父,由于是单项数据流,应该是子通过传递事件通知父组件,数据需要更新.如果是跨层级组件通信,用 provide 和 inject 进行.如果是兄弟组件或者多个组件之间共享状态，通常会把状态提升到共同父组件，或者在项目里直接用 Pinia 这类状态管理方案。v-model 本质上也是 props + emit 的一种语法糖。"

2.生命周期钩子，created和mounted的区别?可以在created里面发请求吗，为什么?created钩子中为什么不可以进行dom操作?dom操作会有什么影响?

生命周期钩子:

Vue 的生命周期可以理解为组件从创建、挂载、更新到卸载的整个过程。在不同阶段，Vue 会提供对应的生命周期钩子，方便我们在合适的时机执行逻辑。

如果按 Options API (vue2)来说，常见可以分成四个阶段：

第一阶段是创建阶段，包括 beforeCreate 和 created。

beforeCreate 时实例刚开始初始化，data、computed、methods 等都还不能正常访问；

created 时这些配置已经初始化完成了，但组件还没有挂载到页面上，所以这时还拿不到真实 DOM。

第二阶段是挂载阶段，包括 beforeMount 和 mounted。

beforeMount 表示组件即将首次渲染，模板已经准备好，但真实 DOM 还没挂载；

mounted 表示组件已经挂载到页面，可以访问真实 DOM，因此常用于 DOM 操作、发送请求、初始化第三方库等。

第三阶段是更新阶段，包括 beforeUpdate 和 updated。

当响应式数据变化时，会先触发 beforeUpdate，这时数据已经变了，但页面还没更新；

等 DOM 根据最新数据完成更新后，会触发 updated。不过一般不建议在 updated 里继续修改响应式数据，否则可能引起重复更新甚至死循环。

第四阶段是卸载阶段， 包括beforeDestroy 和 destroyed。(Vue3：beforeUnmount / unmounted)

beforeDestroy 表示组件即将被卸载，此时实例还可以使用；

destroyed表示组件已经卸载完成，事件监听、定时器、订阅等资源一般会在这个阶段清理。

所以在 created 的阶段可以做一些不依赖于真实 dom 的操作,比如初始化数据,比如做一些 js 计算

beforeDestroy,可以拿到实例上的数据和方法,也通常还能访问当前组件对应的 DOM,做一些收尾逻辑、清理逻辑是可以的,但这个阶段的重点不是"再做业务计算"，而是清理和收尾。

created和mounted的区别?

区别主要是一个能操作真实的 dom,一个不能操作.从使用场景上来说，created 更适合做数据和逻辑初始化 ，比如初始化状态、处理参数、发请求这类不依赖 DOM 的操作；而 mounted 更适合做依赖页面节点的逻辑，比如获取元素尺寸、操作 DOM、初始化第三方插件等。

大量第三方插件本质上不是"给你一个纯函数"，而是接收一个真实 DOM 容器，然后往这个容器里挂内容、读尺寸、绑事件。比如 echart.但是也有一些第三方库不一定需要 DOM,比如 day.js

可以在created里面发请求吗，为什么?

可以。因为 created 阶段组件实例已经创建完成，data、methods、computed、watch 等都已经初始化好了，所以这时候可以访问组件数据并执行业务逻辑。而发送请求本身通常不依赖真实 DOM，因此完全可以在 created 阶段发请求。

补充:

什么时候更适合放在 mounted?

• 请求参数依赖 DOM 尺寸:图表要先拿到Dom
• 请求回来后马上要操作 DOM
• 请求回来后要初始化依赖容器的第三方插件
• 需要拿某个元素的位置、宽高再决定请求或渲染逻辑:虚拟列表

created钩子中为什么不可以进行dom操作?

created 不能做 DOM 操作，因为这个阶段只是实例和数据初始化完成了，组件还没有真正挂载到页面上，真实 DOM 还不存在，所以拿不到页面节点。只有到了 mounted 之后，真实 DOM 才已经渲染出来，才能做 DOM 相关操作。

实例：组件被创建出来之后，在内存里真正工作的那个对象.created 阶段组件实例已经创建好了，但这个组件实例对应的内容还没有挂载到页面 DOM 上

dom操作会有什么影响?

1. 性能上的影响

因为 DOM 操作不是普通 JS 变量赋值，它会涉及浏览器渲染流程。修改了一些元素的内容,样式,浏览器可能要重新计算样式,重新布局,绘制等等,所以频繁 DOM 操作会比单纯操作 JS 数据更重，性能开销更大。

2.在 vue 中乱做 dom操作,可能和响应式更新冲突

vue 本来希望你修改数据,vue 帮你更新页面.如果你自己又手动去改 dom,比如自己改 innerHTML,或者插入删除子节点,那就可能会出现 vue 更新时把你手动改的内容覆盖掉,页面状态和数据状态不一致,不好维护

3.v-if和v-show，和直接销毁dom有什么区别,你说v-if性能开销大，为什么?

• v-show 改 display
• v-if 控制是否渲染
• 高频切换更适合 v-show
• v-if 会有创建/销毁开销

和直接销毁dom有什么区别?

• v-if：是通过 Vue 的模板和响应式系统，让框架决定这块内容要不要渲染
• 直接销毁 DOM：通常是你自己手动用原生 DOM API 去删节点，比如 removeChild、innerHTML = ''

在 Vue 里一般不建议手动直接操作 DOM，因为这会绕开 Vue 的数据驱动,更新机制

你说v-if性能开销大，为什么?

对于 v-if 来说,初始条件如果是 false,就不会渲染,条件如果被切换,就会触发,创建组件/节点,子组件你生命周期重新走一遍,开销主要体现在,频繁切换时开销更大.

对于v-show 来说,不管初始条件是什么,元素都会先渲染出来,后面只是切换 display:none,初始化开销更高一点,但是切换开销更小

延伸:v-if 和 v-show都可以隐藏一个元素,想让他隐藏之后还占位用什么?

visibility: hidden 隐藏 占位

opacity: 0 看不见 占位 但元素通常还能响应事件，仍然可点击