slot 、Vue.mixin 、v-once

一、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>