此版本包括一些重大的內(nèi)部改進(jìn)，幾個比較重要：
- 解析器速度提高 2 倍并提高 SFC 構(gòu)建性能
- 提高計算屬性的重新計算效率
- DefineModel 現(xiàn)已可穩(wěn)定使用
- v-bind 同名時可進(jìn)行簡寫
- 默認(rèn)不再注冊全局 JSX 命名空間
- v-is 指令已被刪除
更高效的響應(yīng)式
Vue 3.4 還對響應(yīng)性系統(tǒng)進(jìn)行了重大重構(gòu)，旨在優(yōu)化計算屬性重新計算的效率。
const count = ref(0)
const isEven = computed(() => count.value % 2 === 0)
watchEffect(() => console.log(isEven.value)) // logs true
count.value = 2 // logs true again
在 Vue 3.4 之前，每當(dāng) count.value變更時，即使計算結(jié)果不變，也會觸發(fā)watchEffect 的回調(diào)。通過 Vue 3.4 優(yōu)化之后，現(xiàn)在當(dāng)且僅當(dāng)僅計算結(jié)果實際變更時，才會觸發(fā)回調(diào)。
另外，在 Vue 3.4 中：
- 多個計算依賴變更能且僅能觸發(fā)一次同步作用(有點(diǎn)類似防抖)。
- 數(shù)組的 shift/unshift/splice 方法能且僅能觸發(fā)一次同步作用。
除了基準(zhǔn)測試中展示的收益之外，這還可以減少一大坨場景中多余的組件重新渲染，同時保留完整的向后兼容性。
v-bind 同名簡寫
<img :id="id" :src="src" :alt="alt" />
<!-- 優(yōu)雅簡寫為： -->
<img :id :src :alt />
刪除全局 JSX 命名空間
從 Vue 3.4 開始，Vue 不再隱式注冊全局 JSX 命名空間。要指示 TypeScript 使用 Vue 的 JSX 類型定義，請確保在你的 tsconfig.json中包含以下內(nèi)容：
{
"compilerOptions": {
"jsx": "preserve",
"jsxImportSource": "vue"
// ...
}
}
你也可以通過在文件的頂部加入/* @jsxImportSource vue */注釋來選擇性地開啟。
如果仍有代碼依賴于全局存在的 JSX 命名空間，你可以在項目中通過顯式導(dǎo)入或引用vue/jsx來保留 3.4 之前的全局行為，它注冊了全局 JSX 命名空間。
具體參考：https://frontend.devrank.cn/traffic-information/7322794141870688307
刪除v-is 指令
v-is 指令已被移除。它在 Vue 3.3 中已廢棄。請改用帶有vue: 前綴的 is 屬性
<component :is="currentTab"></component>
defineModel 現(xiàn)已穩(wěn)定
defineModel 是一個新的 <script setup> 宏，旨在簡化支持 v-model 的組件的實現(xiàn)。
它之前作為實驗性功能在 3.3 中發(fā)布，并在 3.4 中升級為穩(wěn)定狀態(tài)。
// 聲明 "modelValue" prop，由父組件通過 v-model 使用
const model = defineModel()
// 或者：聲明帶選項的 "modelValue" prop
const model = defineModel({ type: String })
// 在被修改時，觸發(fā) "update:modelValue" 事件
model.value = "hello"
// 聲明 "count" prop，由父組件通過 v-model:count 使用
const count = defineModel("count")
// 或者：聲明帶選項的 "count" prop
const count = defineModel("count", { type: Number, default: 0 })
function inc() {
// 在被修改時，觸發(fā) "update:count" 事件
count.value++
}
實現(xiàn)v-model組件數(shù)據(jù)綁定：
<!-- 父組件： -->
<template>
<CommonInput v-model="inputValue" />
</template>
<script setup lang="ts">
import { ref } from "vue";
const inputValue = ref();
</script>
<!-- 老版子組件： -->
<template>
<input
:value="props.modelValue"
@input="emit('update:modelValue', $event.target.value)"
/>
</template>
<script setup lang="ts">
const props = defineProps(["modelValue"]);
const emit = defineEmits(["update:modelValue"]);
</script>
<!-- 3.4后子組件： -->
<template>
<input v-model="model" />
</template>
<script setup lang="ts">
const model = defineModel();
model.value = "xxx";
</script>
實現(xiàn)原理
源碼是customRef 和 watchSyncEffect 去實現(xiàn)的，這里簡化成ref和watch來理解。
defineModel其實就是在子組件內(nèi)定義了一個叫model的ref變量和modelValue的props，并且watch了props中的modelValue。當(dāng)props中的modelValue的值改變后會同步更新model變量的值。并且當(dāng)在子組件內(nèi)改變model變量的值后會拋出update:modelValue事件，父組件收到這個事件后就會更新父組件中對應(yīng)的變量值。
<template>
<input v-model="model" />
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
const props = defineProps(["modelValue"]);
const emit = defineEmits(["update:modelValue"]);
const model = ref();
watch(
() => props.modelValue,
() => {
model.value = props.modelValue;
}
);
watch(model, () => {
emit("update:modelValue", model.value);
});
</script>
我們修改的其實是defineModel返回的ref變量，而不是直接修改props中的modelValue。實現(xiàn)方式還是和vue3.4以前實現(xiàn)雙向綁定一樣的，只是defineModel這個宏幫我們將以前的那些繁瑣的代碼給封裝到內(nèi)部實現(xiàn)了。
修飾符和轉(zhuǎn)換器
為了獲取 v-model 指令使用的修飾符，我們可以像這樣解構(gòu) defineModel() 的返回值：
const [modelValue, modelModifiers] = defineModel()
// 對應(yīng) v-model.trim
if (modelModifiers.trim) {
// ...
}
當(dāng)存在修飾符時，我們可能需要在讀取或?qū)⑵渫交馗附M件時對其值進(jìn)行轉(zhuǎn)換。我們可以通過使用 get 和 set 轉(zhuǎn)換器選項來實現(xiàn)這一點(diǎn)：
const [modelValue, modelModifiers] = defineModel({
// get() 省略了，因為這里不需要它
set(value) {
// 如果使用了 .trim 修飾符，則返回裁剪過后的值
if (modelModifiers.trim) {
return value.trim()
}
// 否則，原樣返回
return value
}
})
資料：
https://blog.vuejs.org/posts/vue-3-4
https://zhuanlan.zhihu.com/p/681356441
https://juejin.cn/post/7319702157459701760?searchId=20240218141428336E8E9C3A5A9860BF54
https://frontend.devrank.cn/traffic-information/7322794141870688307
