Vue3.4的新变化

解析器

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

1. 之前版本的watchEffect每次count.value更改都会触发回调，即使计算结果保持不变。通过 3.4 后的优化，现在仅当计算结果实际发生更改时才会触发回调。
2. 多个计算的依赖 dep 更改仅触发同步效果一次。
3. 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>

主要的更新就是以上这些了～