浪客行》改編自吉川英治的小說《宮本武藏：劍與禪》，由井上雄彥繪畫，講述日本戰國末期到德川初期劍豪宮本武藏的故事，浪客行是漫畫界藝術性的天花板，號稱井上雄彥的封神之作，尤甚灌籃高手，港版連載至41卷因各種原因停刊了，其好在哪？各位看官自行體會，接下來好好欣賞這部作品！！！
篇文章翻譯自 Vue Blog
今天 vue3.3 以 浪客劍心 為代號發布了，本次更新主要專注于 DX（開發體驗）進行改善，特別是針對在 script setup 中使用 typescript 的一系列痛點進行改進。這篇文章旨在描述 3.3 中的重要特性，有關更完整的更改列表，請查閱 changelog。
要體驗這些新特性，前提是你的 volar 更新到了 1.6.x 及以上。并且升級了如下的依賴：
volar / vue-tsc@^1.6.4
vite@^4.3.5
@vitejs/plugin-vue@^4.2.0
vue-loader@^17.1.0 (if using webpack or vue-cli)
之前 defineProps 和 defineEmits 的類型參數位置使用的類型僅限于本地類型（同一文件），并且只支持類型字面量和接口。這是因為 Vue 需要能夠分析 props 接口上的屬性，以便生成相應的運行時選項。此限制現已在 3.3 中解決。編譯器現在可以解析導入的類型，并支持一組有限的復雜類型：
xml復制代碼<script setup lang="ts">
import type { Props } from './foo'
// 導入 + 交叉類型
defineProps<Props & { extraProp?: string }>()
</script>
請注意，復雜類型支持是基于 AST 的，因此不是 100% 全面的。一些需要實際類型分析的復雜類型，例如不支持條件類型（A extends B ? A : never）。您可以對單個 prop 的類型使用條件類型，但不能對整個 props 對象使用。
細節：github.com/vuejs/core/…
使用 <script setup> 的組件現在可以通過 generic 屬性接受通用類型參數：
ini復制代碼<script setup lang="ts" generic="T">
defineProps<{
items: T[]
selected: T
}>()
</script>
generic 的值與 TypeScript 中 <...> 之間的參數列表完全相同。例如，您可以使用多個參數、類型約束、默認類型和引用導入的類型：
xml復制代碼<script setup lang="ts" generic="T extends string | number, U extends Item">
import type { Item } from './types'
defineProps<{
id: T
list: U[]
}>()
</script>
此功能以前需要明確進行配置 eg: vite.config.*，但現在在最新版本的 volar / vue-tsc 中默認啟用。
以前，defineEmits 的類型參數僅支持調用簽名語法：
typescript復制代碼// BEFORE
const emit=defineEmits<{
(e: 'foo', id: number): void,
(e: 'bar', name: string, ...rest: any[]): void
}>()
該類型與 emit 的返回類型相匹配，但寫起來有點冗長和笨拙。 3.3 引入了一種更友好的方式來聲明 emit 的類型：
typescript復制代碼// AFTER
const emit=defineEmits<{
foo: [id: number],
bar: [name: string, ...rest: any[]],
baz: [name: string, ...rest: [number, boolean]]
}>()
在類型結構中，鍵是事件名稱，值是指定參數的類型數組。雖然不是必需的，但您可以使用帶標簽的元組元素來明確顯示，如上例所示。當然 defineEmits 仍然支持調用簽名語法。
新的 defineSlots 宏可用于聲明插槽及插槽的 props：
typescript復制代碼<script setup lang="ts">
defineSlots<{
default?: (props: { msg: string })=> any;
item?: (props: { id: number })=> any
}>()
</script>
defineSlots() 只接受類型參數，不接受運行時參數。類型參數應該是類型字面量，其中屬性鍵是插槽的名稱，值是插槽函數。該函數的第一個參數是插槽期望接收的 props，其類型將用于模板中的插槽 props 的類型。 defineSlots 的返回值與 useSlots 返回的插槽對象相同。
當前的 defineSlots 一些限制：
defineComponent 用法也有對應的 slots 選項。這兩個 API 都沒有運行時影響，并且純粹用作 IDE 和 vue-tsc 的類型提示。
細節請查看: PR#7982
以前是現已刪除的 Reactivity Transform 的一部分，reactive props destructure 已拆分為一個單獨的功能。
該功能允許解構的 props 保留響應式，并提供更有好的方式來聲明 props 默認值：
xml復制代碼<script setup>
import { watchEffect } from 'vue'
?
const { msg='hello' }=defineProps(['msg'])
?
watchEffect(()=> {
// msg 將會被試做為依賴進行追蹤, 就像訪問 props.msg 一樣，當 msg 更新副作用函數會重新執行
console.log(`msg is: ${msg}`)
})
</script>
?
<template>{{ msg }}</template>
此功能是實驗性的，需要進行配置。
以前，對于支持與 v-model 雙向綁定的組件，它需要聲明一個 prop， 并在打算更新 prop 時發出相應的 update:propName 事件：
xml復制代碼<!-- BEFORE -->
<script setup>
const props=defineProps(['modelValue'])
const emit=defineEmits(['update:modelValue'])
console.log(props.modelValue)
?
function onInput(e) {
emit('update:modelValue', e.target.value)
}
</script>
?
<template>
<input :value="modelValue" @input="onInput" />
</template>
3.3 使用新的 defineModel 宏簡化了使用。宏會自動注冊一個 prop，并返回一個可以直接改變的 ref：
xml復制代碼<!-- AFTER -->
<script setup>
const modelValue=defineModel()
console.log(modelValue.value)
</script>
?
<template>
<input v-model="modelValue" />
</template>
此功能是實驗性的，需要進行配置。
新的 defineOptions 宏允許直接在 <script setup> 中聲明組件選項，而不需要單獨的 <script> 塊：
xml復制代碼<script setup>
defineOptions({ inheritAttrs: false })
</script>
toRef 已得到增強以支持將 普通值、getters函數、refs 轉化為 refs：
scss復制代碼// 等同于 ref(1)
toRef(1)
// 創建一個只讀的 ref，當訪問 .value 的時候傳入的 getter 函數將會被調用
toRef(()=> props.foo)
// 返回這個已存在的 ref
toRef(existingRef)
性能優化來了：使用 getter 調用 toRef 類似于 computed，但當 getter 只是執行屬性訪問而不需要昂貴的計算時，它會更高效。
新的 toValue 實用方法提供了相反的方法，將 values / getters / refs 規范化為值：
scss復制代碼toValue(1) // --> 1
toValue(ref(1)) // --> 1
toValue(()=> 1) // --> 1
toValue 可以在組合函數（hooks）中代替 unref 使用，這樣您的組合函數就可以接受 getter 作為響應式數據源：
scss復制代碼// before: 分配不必要的中間引用
useFeature(computed(()=> props.foo))
useFeature(toRef(props, 'foo'))
?
// after: 更高效簡潔
useFeature(()=> props.foo)
toRef 和 toValue 之間的關系類似于 ref 和 unref 之間的關系，主要區別在于 getter 函數的特殊處理。
目前，Vue 的類型會自動注冊全局 JSX 類型。這可能會導致與需要 JSX 類型推斷的其他庫一起使用時發生沖突，尤其是 React。
從 3.3 開始，Vue 支持通過 TypeScript 的 jsxImportSource 選項指定 JSX 命名空間。這允許用戶根據他們的用例選擇全局或每個文件選擇加入。
為了向后兼容，3.3 仍然全局注冊 JSX 命名空間。我們計劃在 3.4 中移除默認的全局注冊。如果你在 Vue 中使用 TSX，你應該在升級到 3.3 后將顯式的 jsxImportSource 添加到你的 tsconfig.json 以避免在 3.4 中損壞。
此版本建立在許多基礎生態改進的基礎上，使我們能夠更有信心地更快地行動：
按照計劃，我們的目標是在 2023 年開始發布更小、更頻繁的功能版本。敬請期待！
作者：artsmp
鏈接：https://juejin.cn/post/7231940493256048700
浪客劍心 - 明治劍客浪漫譚-》（るろうに剣心 -明治剣客浪漫譚-）是日本漫畫家和月伸宏于1994年—1999年在日本《周刊少年Jump》上連載的少年漫畫，單行本舊版共28卷，完全版共22卷。
截止到2020年，漫畫單行本的累計發行量已突破7200萬冊。
劇情簡介
該故事發生在明治維新初年的東京。主人公緋村劍心在幕末是維新派的劊子手，人稱“拔刀齋”，殺人無數。在新時代，他使用一柄逆刃刀四處流浪，立志不再殺人。在東京的神谷道場，劍心遇到了阿薰及一幫朋友們。他是否找到了呢——劍的方向，心的歸屬。
逆刃之劍，也許是想就這樣悄悄的藏住自己的鋒芒的，可是劍終歸是劍，能夠出鞘的劍就更沒有理由來說自己已經把自己隱藏得很好。
也許是想避開那些權利的爭斗，也許是想避開無謂的紛擾，可是拔刀齋始終是屬于那個一開始就被叫做拔刀齋的人，就算有人能夠繼承，就算別人能夠搶去這樣的名號，但是人們提起這個名字，腦海里還是一個火紅的背影。
最初版
日文版由集英社出版，共28卷。
完全版
日文原版由日本集英社出版，共22卷。
繁體中文版由中國臺灣東立出版社出版，共22卷。
繁體中文版由中國香港文化傳信出版，共22卷。