此版本包括一些重大的内部改进，几个比较重要：
- 解析器速度提高 2 倍并提高 SFC 构建性能
- 提高计算属性的重新计算效率
- DefineModel 现已可稳定使用
- v-bind 同名时可进行简写
- 默认不再注册全局 JSX 命名空间
- v-is 指令已被删除
更高效的响应式
Vue 3.4 还对响应性系统进行了重大重构，旨在优化计算属性重新计算的效率。
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 之前，每当 count.value变更时，即使计算结果不变，也会触发watchEffect 的回调。通过 Vue 3.4 优化之后，现在当且仅当仅计算结果实际变更时，才会触发回调。
另外，在 Vue 3.4 中：
- 多个计算依赖变更能且仅能触发一次同步作用(有点类似防抖)。
- 数组的 shift/unshift/splice 方法能且仅能触发一次同步作用。
除了基准测试中展示的收益之外，这还可以减少一大坨场景中多余的组件重新渲染，同时保留完整的向后兼容性。
v-bind 同名简写
<img :id="id" :src="src" :alt="alt" />
<!-- 优雅简写为： -->
<img :id :src :alt />
删除全局 JSX 命名空间
从 Vue 3.4 开始，Vue 不再隐式注册全局 JSX 命名空间。要指示 TypeScript 使用 Vue 的 JSX 类型定义，请确保在你的 tsconfig.json中包含以下内容：
{
"compilerOptions": {
"jsx": "preserve",
"jsxImportSource": "vue"
// ...
}
}
你也可以通过在文件的顶部加入/* @jsxImportSource vue */注释来选择性地开启。
如果仍有代码依赖于全局存在的 JSX 命名空间，你可以在项目中通过显式导入或引用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 现已稳定
defineModel 是一个新的 <script setup> 宏，旨在简化支持 v-model 的组件的实现。
它之前作为实验性功能在 3.3 中发布，并在 3.4 中升级为稳定状态。
// 声明 "modelValue" prop，由父组件通过 v-model 使用
const model = defineModel()
// 或者：声明带选项的 "modelValue" prop
const model = defineModel({ type: String })
// 在被修改时，触发 "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() {
// 在被修改时，触发 "update:count" 事件
count.value++
}
属性
实现v-model组件数据绑定：
<!-- 父组件： -->
<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>
实现原理
源码是customRef 和 watchSyncEffect 去实现的，这里简化成ref和watch来理解。
defineModel其实就是在子组件内定义了一个叫model的ref变量和modelValue的props，并且watch了props中的modelValue。当props中的modelValue的值改变后会同步更新model变量的值。并且当在子组件内改变model变量的值后会抛出update:modelValue事件，父组件收到这个事件后就会更新父组件中对应的变量值。
<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。实现方式还是和vue3.4以前实现双向绑定一样的，只是defineModel这个宏帮我们将以前的那些繁琐的代码给封装到内部实现了。
修饰符和转换器
为了获取 v-model 指令使用的修饰符，我们可以像这样解构 defineModel() 的返回值：
const [modelValue, modelModifiers] = defineModel()
// 对应 v-model.trim
if (modelModifiers.trim) {
// ...
}
当存在修饰符时，我们可能需要在读取或将其同步回父组件时对其值进行转换。我们可以通过使用 get 和 set 转换器选项来实现这一点：
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
网友评论