Vue面试（3）-- vue高级特性，2024年最新超全前端中高级面试复习大纲

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

website: {

url: ‘http://imooc.com/’,

title: ‘imooc’,

subTitle: ‘程序员的梦工厂’

}

}

}

}

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和组件可能会出现多对多的关系，复杂度较高

{{name}} {{major}} {{city}}

<button @click=“showName”>显示姓名