Vue3

[mileOfSunshine]

keep-alive

vue2写法：

<keep-alive>
  <router-view/>
</keep-alive>

vue3写法：

<router-view v-slot="{ Component }">
  <transition>
    <keep-alive>
      <component :is="Component" :key="key"/>
    </keep-alive>
  </transition>
</router-view>

借助空组件（如下）实现嵌套路由会造成路由缓存失效。

<template>
  <router-view />
</template>

[xbx1173468456]

大佬们， vue3用到keepalive页面缓存失效，有解决办法吗？

[mileOfSunshine]

大佬们， vue3用到keepalive页面缓存失效，有解决办法吗？

不知你属于哪种失效情况，可参考我的文章：看keep-alive如何在项目中失效

[mileOfSunshine]

在 <script setup> 中要使用动态组件的时候，:is 绑定值不能是字符串，必须是组件变量。

<template>
  <component :is="Foo" />
  <component :is="`foo`" /> <!-- 不行 -->
  <component :is="someCondition ? Foo : Bar" />
</template>

<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>

如何解决业务中遇到 :is 绑定值为字符串的情景？

解决方案1：在普通script中局部注册组件

<template>
  <component :is="`foo`" /> <!-- 通过了 -->
</template>

<script>
import Foo from './Foo.vue'
export default {
  components: { Foo  }
}
</script>

<script setup>
。。。
</script>

解决方案2：全局注册 Foo 组件

[mileOfSunshine]

Vue3 优势

• 性能提升
  • 响应式系统升级：用 Proxy 重写了响应式系统
  • 编译升级：标记和提升所有静态节点，diff 的时候只需要比较动态节点内容
  • 静态提升
  • diff 算法优化
  • 事件监听缓存
  • SSR
  • 源码体积优化：移除了不常用的 api 、更好的 tree-shaking 按需引入

[mileOfSunshine]

Vue3 Composition API & Vue2 Options API

• Options API 缺点
  • 代码可读性虽组件变大而变差
  • 每种代码复用方式都存在缺点
  • TS支持差
• Composition API 优势
  • 逻辑组织：解决了 Vue2 代码碎片化问题
  • 逻辑复用：编写 hooks 函数