一、Vue 中 slot 是如何实现的?什么时候使用它?
二、Vue.mixin 的使用场景和原理
1、Vue.mixin 概念和作用
mixin 可以用来扩展组件,将公共逻辑进行抽离(实现逻辑复用)。
在需要该逻辑时进行”混入”,采用策略模式针对不同的属性进行合并。
如果混入的数据和本身组件中的数据冲突,会采用“就近原则”以组件的数据为准。
2、mixin 的缺陷
mixin 中有很多缺陷,例如“命名冲突问题”、"数据来源问题不明确”等问题。
Vue3 采用 CompositionAPI 提取公共逻辑非常方便,对于逻辑共享和复用很方便。
3、混入方式(拓展方式)有几种?
① 局部混入:用于复用逻辑;
② 全局混入:用于编写插件,主要是用于共享属性和方法,例如 vue-router、vuex
4、mixin 合并策略
核心就是:对象的合并处理。
内部采用“策略模式”:
① props、methods、inject、computed 同名时会被替换;
② data 会被合并成;
③ 生命周期和 watch 方法会被合并成队列;
④ components、directives、filters 会在原型链上叠加;
组件的扩展除了 mixin 之外还有一个属性叫 extends,但是不怎么常用,因为extends只支持一个 。
三、v-once 的使用场景有哪些 ?
1、v-once 概念
v-once是 Vue的内置指令,只渲染元素和组件一次。随后的重新染,元素/组件及其所有的子节点将被视为静态内容并跳过。
这可以用于优化更新性能。
2、v-once 使用场景
<!-- 单个元素 -->
<span v-once>This will never change: {{ msg }}</span>
<!-- 放到外层标签,有子元素 -->
<div v-once>
<h1>comment</h1>
<p>{{ msg }}</p>
</div>
<!-- 组件 -->
<my-component v-once:comment="msg"></my-component>
<!--“v-for"指令-->
<u1>
<li v-for="i in list" v-once>{{ i }}</li>
</u1>
3、v-once的原理、缺陷和改进
原理:本质上就是一个缓存, 默认会缓存虚拟节点,下次直接使用上次的缓存结果。借助缓存的机制,减少页面的重新渲染。优化了代码性能。
缺陷:动态数据无法得到更新;
改进:Vue3.2之后,增加了 v-memo 指令,通过依赖配置的方式控制页面渲染。
告知哪个属性发生变化了,才会去渲染节点。类似于计算属性 和 watchEffect。
<div v-memo="[valueA,valueB]"> <div class="box" v-for="item in arr" :key="item">{{ item }}</div> <div>