vue3.4+最新属性变化

Attribute绑定

新增简写方法

<!-- 与 :id="id" 相同 -->
<div :id></div>

<!-- 这也同样有效 -->
<div v-bind:id></div>

动态参数

<a v-bind:[demoName]="url"></a>

//简写
<a :[demoName]="url"></a>

demoName 会作为一个 JavaScript 表达式被动态执行，计算得到的值会被用作最终的参数。

绑定函数事件

<a v-on:[demoName]="function"></a>

//简写 例： v-on:focus
<a @[demoName]="function"></a>

注意

动态参数，即中括号内的参数需要小写[demoname] 上面的例子将会在 DOM 内嵌模板中被转换为 :[demoname]。如果你的组件拥有 “demoName” 属性而非 “demoname”，这段代码将不会工作。单文件组件内的模板不受此限制。

一次性侦听器

每当被侦听源发生变化时，侦听器的回调就会执行。如果希望回调只在源变化时触发一次，请使用once:true选项。

watch(
  source,
  (newVal, oldVal) =>{
   
  },
  {
  once: true
  }
)

v-model

从 Vue 3.4 开始，推荐的实现方式是使用 defineModel()宏
这个宏可以用来声明一个双向绑定prop,通过父组件的v-model来使用。

警告：如果为defineModel prop设置了一个default 值且父组件没有为该prop提供任何值，会导致父组件与子组件之间不同步。在下面的示例中，如组件的myRef是undefined, 而子组件的model 是1：

// 子组件：
const model = defineModel({ default: 1 })

// 父组件
const myRef = ref()

<Child v-model="myRef"></Child>

defineOptions() vue3.3+

这个宏可以用来直接在 中声明组件选项，而不必使用单独的script块。
这是一个宏定义，选项将会被提升到模块作用域中，无法访问 <script setup> 中不是字面常数的局部变量。

defineSlots vue3.3+

这个宏可以用于为IDE提供插槽名称和props类型检查的类型提示

mergeProps()

合并多个props对象，用于处理含有特定的props参数的情况。