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

前端八股整理Vue 02组件通信、生命周期、v-if 与 v-show1.讲讲VUE中的组件通信组件通信的基本原则是单向数据流,最基础的是父子通信父传子通常通过 props在 Vue3 里一般用 defineProps 接收,子组件接收父组件传过来的参数.子传父,由于是单项数据流,应该是子通过传递事件通知父组件,数据需要更新.在 Vue3 中可以使用 defineEmits 声明事件并通过 emit 触发。如果是跨层级组件通信,用 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。(Vue3beforeUnmount / 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操作会有什么影响?性能上的影响因为 DOM 操作不是普通 JS 变量赋值它会涉及浏览器渲染流程。修改了一些元素的内容,样式,浏览器可能要重新计算样式,重新布局,绘制等等,所以频繁 DOM 操作会比单纯操作 JS 数据更重性能开销更大。2.在 vue 中乱做 dom操作,可能和响应式更新冲突vue 本来希望你修改数据,vue 帮你更新页面.如果你自己又手动去改 dom,比如自己改 innerHTML,或者插入删除子节点,那就可能会出现 vue 更新时把你手动改的内容覆盖掉,页面状态和数据状态不一致,不好维护3.v-if和v-show和直接销毁dom有什么区别,你说v-if性能开销大为什么?v-show 改 displayv-if 控制是否渲染高频切换更适合 v-showv-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 看不见 占位 但元素通常还能响应事件仍然可点击