Vue面试（3）-- vue高级特性，分享一些行业经验怎么说

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

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

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

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

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

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

正文

name: ‘app’,

data() {

return {

list: [‘a’, ‘b’, ‘c’]

}

},

methods: {

addItem() {

this.list.push(${Date.now()})

this.list.push(${Date.now()})

this.list.push(${Date.now()})

// 1. 异步渲染，$nextTick 待 DOM 渲染完再回调

// 2. 页面渲染时会将 data 的修改做整合，多次 data 修改只会渲染一次(使用一次$nextTick)

this.$nextTick(() => {

// 获取 DOM 元素

const ulElem = this.$refs.ul1

// eslint-disable-next-line

console.log( ulElem.childNodes.length )

})

}

}

}

(在DOM元素定义ref=”ul1”,之后可以使用this.$refs.ul1拿到DOM元素)

不使用$nextTick的效果： 点击一次输出3，点击第二次输出6

为了使点击之后可以立刻得到渲染结果：使用$nextTick

3. slot插槽

---

****组件插槽的作用：****父组件向子组件传递内容（模板的内容）

****插槽的位置：****位于子组件的模板中

（1） 基本使用

vue 高级特性

{{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