2024年最新Vue面试（3）-- vue高级特性，必看的70道面试题回答

打开全栈工匠技能包-1小时轻松掌握SSR

两小时精通jq+bs插件开发

生产环境下如歌部署Node.js

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader

{{website.title}}

SlotDemo.vue

显示默认内容，即父组件没设置内容时

（效果：链接会以标签形式显示并且显示title内容）

（2）作用域插槽

{{website.subTitle}} 

（如果不传入值{{website.subTitle}}}，则会显示子组件的默认subtitle）

使用：子组件中作用域的data让父组件可以获取到

{{slotProps.slotData.title}}

效果：页面显示子组件内容wangEditor

（思路：在slot中定义动态属性slotData，然后把他定义到website上，website中含有title和subtitle。然后在index中使用ScopedSlotDemo中定义v-slot=”slotProps”.之后可以使用slot Props.slot DaTa拿到ScopedSlotDemo组件中website的内容，从而可以拿到website的title）

（3）具名插槽

有名字的插槽—根据内容进行匹配–没有名称会默认匹配

父组件往子组件传递内容的时候需要对应好名字

4. 动态组件异步组件

---

（1）动态组件

用法: ：is=********”component-name”

需要根据数据、动态渲染的场景。即组件类型并不确定。（一般情况下组件类型是确定的）

举例使用场景：新闻详情页。（组件位置不确定或者种类不确定。即不知道要渲染甚么样的组件，只知道数据。需要根据数据确定组件的类型，这时就需要用到动态组件）

vue 高级特性

（根据获取到的组件（text，image）进行渲染）

（2）异步组件

Import函数

按需加载、异步加载大组件

（什么时候用就什么时候加载，如果不使用永远都不会加载，适合于组件比较大比较复杂，这样会优化性能）

使用语句import SlotDemo from ‘./SlotDemo’ 是同步加载

<button @click=“showFormDemo = true”>show form demo

// 然后在components里面写

components: {

FormDemo: () => import(‘…/BaseUse/FormDemo’),

}

效果：没有点击时不会加载FormDemo,点击之后会加载然后渲染出来

5.keep-alive

---

缓存组件

频繁切换，不需要重复渲染

Vue常见性能优化

KeepAlive.Vue中引入三个组件KeepAliveAtageA、KeepAliveAtageB、KeepAliveAtageC是三个按钮

依次点击BC的效果：

不使用keep alive	使用keepalive
A mounted A destroyed B mounted B destroyed C mounted C destroyed A mounted	A created B created C created
<KeepAliveStageA v-if="state === 'A'"/>  <KeepAliveStageB v-if="state === 'B'"/> <KeepAliveStageC v-if="state === 'C'"/>	<keep-alive> <!-- tab 切换 -->             <KeepAliveStageA v-if="state === 'A'"/>             <KeepAliveStageB v-if="state === 'B'"/>             <KeepAliveStageC v-if="state === 'C'"/>  </keep-alive>

使用keep-alive和v-show的区别:

v-show是通过原生CSS控制（使用情况：标签比较简单）

Keepalive 是在vue框架层级进行的JS对象的渲染（使用情况：带有层级或者tab切换的复杂组件切换）

<button @click=“changeState(‘A’)”>A

<button @click=“changeState(‘B’)”>B

<button @click=“changeState(‘C’)”>C

keepAliveStateA.vue

state A

6. mixin

---

多个组件有相同的逻辑，从中抽离出来

Mixin并不是完美的解决方案，会有问题

Vue 3提出的composition API 旨在解决这些问题

(Mixin就是一段js代码)

Mixin的问题

(1) 变量来源不明，不利于阅读

(2) 多个mixin可能会造成命名冲突

(3) Mixin和组件可能会出现多对多的关系，复杂度较高

最后

推荐一些系统学习的途径和方法。

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML 和 CSS：