Vue3 中指令参数支持动态参数

在Vue3 的 RFCs文档中,Vue3中指令参数将支持动态参数。

基础示例

<div v-bind:[key]="value"></div>
<div v-on:[event]="handler"></div>
<div v-slot:[slotName]="slotProps"></div>

为什么要这么做

在Vue3.0之前，Vue中的指令参数都是静态设置的，当然也可以通过JavaScript的语法是达到动态参数的目的。

<div v-bind="{ [key]: value }"></div>
<div v-on="{ [event]:  handler }"></div>

上面这种方法存在一些问题：

• 知道这个技巧的人并不多

• 代码执行效率不高，如果在一个节点上同时绑定了动态参数和静态参数，h 函数就必须动态地迭代它并将其混合到现有的数据对象中。代码如下：

  return h('div', {
      on: Object.assign({
          click: onClick
      },{
          [event]: handler
      })
  })
  

  而使用动态指令的语法后，生成的代码如下：

  return h('div',{
      on: {
          click: onClick,
          [event]: handler
      }
  })
  

另外一个原因是：v-slot没有像 v-on 和 v-bind一样的对象语法，因为它的值是用来声明slot作用域变量的。

应用示例

<div v-bind:[key]="value"></div>

<div :[key]="value"></div>

<div v-on:[event]="handler"></div>

<div @[event]="handler"></div>

<foo>
  <template v-slot:[name]>
    Hello
  </template>
</foo>

<foo>
  <template #[name]>
    Default slot
  </template>
</foo>

特殊情况 null 的处理

指令动态参数的值一般为string,然而，如果我们允许使用null来表示移除这个指令，将会是非常便利的。其他的non-string类型的值都是错误的会产生一个警告。
null只能用在v-bind 和 v-on指令上，而不能用在v-slot上。这是因为v-slot不是一个绑定的属性值而且也不能被移除。自定义指令可以自由决定如何处理non-string的值，但是希望遵循惯例。

动态指令表达式书写规范

理论上，可以使用任意复杂的JavaScript表达式来指定指令的参数，但是html属性名称不能包含空格和引号，所以，需要注意以下情况。

<div :[key + 'foo']="value"></div>

上面这种情况并不能达到我们期望的效果，可以下面这种写法

<div :[`${key}foo`]="value"></div>

注意：太复杂的表达式，建议通过计算属性进行预转换