vue3.4（灌篮高手）新特性介绍和体验

简要介绍

此版本包括一些实质性的内部改进 - 最引人注目的是重写的模板解析器，速度提高了 2 倍，以及重构的反应式系统，使效果触发更加准确和高效。它还包含了许多API的质量改进，包括defineModel的稳定性和绑定道具时新的同名简写。-- vue3.4（灌篮高手）

新的语法糖

defineModel 宏（稳定可用）

介绍： 使用该宏可以用于声明可通过 v-model 父组件使用的双向绑定 prop。

vue3.4 以前我们定义父子组件通过v-model进行数据双向绑定常常需要做以下步骤：

1. 在子组件内定义一个名为modelValue的prop
2. 在子组件内定义一个名为update:modelValue的emit

代码如下所示：需要通过emit进行数据传递，触发父组件的变量的修改，显得非常繁琐。

<script setup lang="ts">
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <input
    :value="props.modelValue"
    @input="emit('update:modelValue', $event.target.value)"
  />
</template>

vue3.4以后，我们直接通过defineModel命令简化操作，父组件操作不变，还是通过v-model进行绑定，而在子组件内我们只需要通过 defineModel这个命令定义变量，之后修改就像操作ref定义的变量一般简单。
其实这个宏的本质就是一个语法糖，对语法的简写形式。
它在子组件内 默认定义了一个名为modelValue的prop

子组件

<template>
<div>{{ model }}</div>
<button @click="changeModel">加一</button>
</template>


<script setup lang="ts">
const model = defineModel({type: Number, default: 0})
const changeModel = () => {
    console.log(model.value);
    model.value++
}
</script>

父组件

<script setup lang="ts">
import Child from './components/Child.vue'
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
<Child  v-model="count"/>
</template>

对于definedModel更多配置和详情和查看changeModelAPI

v-bind 语法糖

这主要是在绑定的属性名和我们脚本中定义的变量名一致的情况下，绑定的=右侧的变量名可以省略不写，如下代码：

vue3.4以上，超级简洁写法

<template>
    <img :src :alt>
</template>


<script setup lang="ts">
import {ref, reactive} from 'vue'
const src = ref('https://picsum.photos/200/300')
const alt = ref('alt')
</script>

vue3.4以下，不能省略

<template>
    <img :src="src" :alt="alt">
</template>


<script setup lang="ts">
import {ref, reactive} from 'vue'
const src = ref('https://picsum.photos/200/300')
const alt = ref('alt')
</script>

其他特性

计算属性计算效率 ↑

在vue3.4以后版本中，只要值是一样没有发生变化的，那么watchEffect不会执行回调。

<script setup lang="ts">
import { ref, computed, watchEffect } from 'vue'
const show = ref(true)
const content =  ref('hello')
const num = ref(0)
const val = computed(() => {
  console.log('计算属性调用了');
  return num.value % 2 === 0 ? '偶数' : '奇数'
})
const toggle = () => {
  console.log('触发修改');
  num.value = 2
}
watchEffect(() => {
  console.log('watchEffect', val.value);
})
</script>

<template>
  <button @click="toggle">变换</button>
  <div style="color: red;">{{ val }}</div>
</template>

代码执行结果：

在vue3.4一下版本中，watchEffect在值相同时会多执行一次回调。

这一特性可以减少没必要的组件重复渲染

模板解析器 ↑

以前，Vue 使用递归下降解析器，它依赖于许多正则表达式和前瞻搜索。新的解析器使用基于 htmlparser2 中的分词器的状态机分词器，它只遍历整个模板字符串一次。其结果是，对于所有大小的模板，解析器的速度始终是其两倍。-- vue新特性介绍

废弃功能（jsx）

参考：废弃内容