解析器
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 truecount.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>
主要的更新就是以上这些了~