setup 目前存在的限制
修改选项配置需要单开一个 script
配置项的缺失，有时候我们需要更改组件选项，在setup中我们目前是无法做到的。我们需要在上方再引入一个 script，在上方写入对应的 export即可。
<script> export default { name: 'YourName', inheritAttrs: false, customOptions: {}, } </script> <script setup> // your code </script>
注意：Vue 3 SFC 一般会自动从组件的文件名推断出组件的 name。在大多数情况下，不需要明确的 name 声明。唯一需要的情况是当你需要
<keep-alive>包含或排除或直接检查组件的选项时，你需要这个名字。
与 TS 与 ESLint 不是完美融合
- 与
@typescript-eslint/no-unused-vars规则不兼容，此规则含义为定义了，未进行使用。该规则其实影响不大，关闭即可。
- 与导入的类型声明不兼容，当你通过解构的方式去导入类型，
setup sugar会进行自动导出。这时候，你就会收到 TS 的一条报错：此为类型，但被当作值使用。解决办法：类型导出使用export default导出或者引入时使用import * as xx来进行引入。
感谢评论区补充：
import type { test } from "./test";如此书写，也是可以解决的。
关于这一点，也许你会想着在上方写一个 script 进行导入，但是这是不行的。在上方 script 导入的东西，也会被自动导出。详情见：github.com/vuejs/vue-n…[7]
必须安装新的插件
集成开发环境需要为这个新的 <script setup> 模型提供专门的处理，以便提供模板表达式类型检查 / 道具验证等。安装Volar也是为了这个目的。
vue3 中如何实现国际化
- 下载最新的
vue-i18n,当前版本"vue-i18n": "^9.1.7"。
- src 下创建文件夹
locales，创建好对应语言文案（这里最好使用 json）。
import en from "./en.json"; import zhHans from "./zh-cn.json"; import zhHant from "./zh-hk.json"; import { createI18n } from "vue-i18n"; import { judgeLang } from "@/utils/url"; const messages = { en: en, "zh-hans": zhHans, "zh-hant": zhHant, }; const i18n = createI18n({ locale: judgeLang(), messages, }); export default i18n;
main.ts中引入i18n
import { createApp } from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; import i18n from "@/locales/index"; createApp(App).use(store).use(router).use(i18n).mount("#app");
- 创建一个
i18n hook
import { provide, inject } from "vue"; import { useI18n } from "vue-i18n"; export function useProvideI18n(): void { const { t } = useI18n(); // 注入翻译函数 provide("t", t); } export function useInjectI18n(): (text: string) => string { const t = inject("t") as (text: string) => string; return t; }
- 在
app.vue,进行注入。随后，便可在各处进行接收使用。
- 下载
i18n Ally，可查看实时翻译（强烈推荐）。
vue3.2新增有意思的东西
v-memo（Vue3.2 新增）
记录指令下的模板树。该指令期望一个数组，如果数组内的值，都没有发生更新，那么指令下的模板树也不会发生更新。
<div v-memo="[valueA, valueB]"> ... </div>
当组件重新渲染时，如果
valueA和valueB保持不变，<div>则将跳过此组件及其子组件的所有更新。实际上，即使是 Virtual DOM VNode 创建也将被跳过，因为可以重复使用子树的记忆副本。
官网提到v-memo仅用于性能关键场景中的微优化，一般使用到的地方应该是渲染大型v-for列表（其中length > 1000）。
<div v-for="item in list" :key="item.id" v-memo="[item.id === selected]"> <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p> <p>...more child nodes</p> </div>
v-bindin<style>（实验性语法）
支持在单文件组件样式中使用组件状态驱动的CSS变量。其实，关于这个提案已经持续很久了（换了写法而已），本质上是利用CSS var() 函数。
<template> <div class="text">hello</div> </template> <script> export default { data() { return { color: 'red', font: { size: '2em', }, } }, } </script> <style> .text { color: v-bind(color); /* 表达式需用引号括起来 */ font-size: v-bind('font.size'); } </style>
你可能会遇到的问题
移动端调试工具 vConsole 发生栈溢出
一般移动端调试都是使用vConsole轻量好用，但是目前对 Vue3 兼容性不好，使用到一定时间，会出现栈溢出。这里推荐另外一个调试工具eruda，eruda目前使用起来并没有大的问题，但是这个插件特别大，500 多 kb 是对于移动端是无法忍受的，即便压缩后也有 100 多 kb。这里我们只要根据环境判断，利用 script 动态插入就好了。
export default function debugInit(): void { const script = document.createElement("script"); script.type = "text/javascript"; script.src = "//cdn.bootcdn.net/ajax/libs/eruda/2.3.3/eruda.js"; document.getElementsByTagName("head")[0].appendChild(script); script.onload = function () { window.eruda.init(); }; }
慎用无根标签的组件
目前 vue3 中我们已经不需要强制组件有一个根标签了，但是有些情况下，表现并不太好。
例如：transition组件目前和此种写法偶发出现问题。
你在Vue3的使用中，有遇到什么坑或者经验之谈吗？可以在评论区留下你宝贵的建议哦～
写在最后
我是零一，如果我的文章对你有帮助，请点个 赞👍🏻 支持我一下
