解析器
3.4版本解析器速度提升2倍，提高了 SFC 构建性能。
之前版本Vue 使用递归下降解析器，该解析器依赖于许多正则表达式和前瞻搜索。新的解析器使用基于htmlparser2中的标记生成器的状态机标记生成器，它仅迭代整个模板字符串一次。
响应式上
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
- 之前版本的watchEffect每次count.value更改都会触发回调，即使计算结果保持不变。通过 3.4 后的优化，现在仅当计算结果实际发生更改时才会触发回调。
- 多个计算的依赖 dep 更改仅触发同步效果一次。
- Array shift, unshift,splice方法仅触发一次同步效果。
defineModel
defineModel是一个新的
// 1.声明一个modelValue的属性，消费父组件v-model绑定的值
const model = defineModel()
// 可以携带options
const model = defineModel({
type: String })
// 现在直接修改值.value即可，相当于调用了emits "update:modelValue"
model.value = 'hello'
// 声明父组件绑定的v-model:count='xxx'
const count = defineModel('count')
// 2。定义type和默认值
const count = defineModel('count', {
type: Number, default: 0 })
// 3.如果我们想获取v-model添加的修饰符，子组件中可以解构出来，第二个参数就是修饰符
const [modelValue, modelModifiers] = defineModel()
// 父组件v-model.trim='xxxx' 子组件eg: modelModifiers.trim
//4.当存在修饰符时，我们可能需要在读取或将其同步回父元素时对其值进行转换。我们可以通过使用get和set转换器选项来实现这一点:
const [modelValue, modelModifiers] = defineModel({
// get() 可以省略
set(value) {
// 如果trim修饰符存在就将值去掉作用空格返回同步回父组件
if (modelModifiers.trim) {
return value.trim()
}
return value
}
})
v-bind同名缩写
const id = ref('23213')
const name = ref('name')
<Test :id :name>
主要的更新就是以上这些了～
