昊源建设监理有限公司网站,广州住房与城乡建设部网站,推广普通话宣传内容,网站备案接入商变更解析器
3.4版本解析器速度提升2倍#xff0c;提高了 SFC 构建性能。 之前版本Vue 使用递归下降解析器#xff0c;该解析器依赖于许多正则表达式和前瞻搜索。新的解析器使用基于htmlparser2中的标记生成器的状态机标记生成器#xff0c;它仅迭代整个模板字符串一次。
响应式…解析器
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:countxxx
const count defineModel(count)
// 2。定义type和默认值
const count defineModel(count, { type: Number, default: 0 })
// 3.如果我们想获取v-model添加的修饰符子组件中可以解构出来第二个参数就是修饰符
const [modelValue, modelModifiers] defineModel()
// 父组件v-model.trimxxxx 子组件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主要的更新就是以上这些了
