Vue3是否有类似Django {%with%}的模板变量别名指令？

Vue3 没有内置和 Django {% with %} 同名的指令，但有原生支持的实现方式，也可以自定义指令实现你期望的 v-with 语法，完全可以消除长路径重复书写的冗余问题。

原生无依赖方案（所有Vue3版本通用） #

利用 v-for 会创建独立块级作用域的特性，把需要取别名的长路径变量放到单元素数组里遍历，就能在当前块内直接使用短别名，不需要额外写自定义逻辑、也没有版本兼容问题：

<template v-for="cell in [props.row[props.column.field]]" :key="column.field">
  <div
    v-if="cell.useCounter"
    :class="`severity-${cell.maxSeverity}`"
  >
    <span v-if="cell[lvl] !== 0">
      {{cell[lvl]}}
    </span>
  </div>
</template>

• 这个写法的作用域完全被包裹在当前 <template> 块内，不会污染外层模板的变量
• 需要同时定义多个别名时，直接在数组里放多个值、对应多个遍历变量即可，比如 v-for="(cell, rowMeta) in [props.row[props.column.field], props.row.meta]"
• 注意给:key绑定唯一值即可，不会产生额外的DOM渲染开销

如果你用的是 Vue 3.2+ 版本，还可以用更简洁的作用域变量声明写法，直接在<template>标签上绑定临时变量：

<template :cell="props.row[props.column.field]">
  <div
    v-if="cell.useCounter"
    :class="`severity-${cell.maxSeverity}`"
  >
    <span v-if="cell[lvl] !== 0">
      {{cell[lvl]}}
    </span>
  </div>
</template>

效果和上面的v-for写法完全一致，不需要额外绑定key。

自定义v-with指令实现你期望的语法 #

如果更习惯 xxx as 别名 的书写格式，可以全局注册一个简单的自定义指令，几行代码就能实现：

// 项目入口main.js中全局注册
app.directive('with', {
  beforeMount(el, binding) {
    // 解析 v-with="value as alias" 格式的表达式
    const [_, valueExpr, alias] = binding.expression.match(/^(.+?)\s+as\s+(\w+)$/)
    // 将别名注入当前节点的模板作用域
    el._vnode.ctx[alias] = binding.value
  },
  beforeUpdate(el, binding) {
    const [_, valueExpr, alias] = binding.expression.match(/^(.+?)\s+as\s+(\w+)$/)
    el._vnode.ctx[alias] = binding.value
  }
})

注册完成后就可以直接用你写的示例代码格式：

<div
  v-with="props.row[props.column.field] as cell"
  v-if="cell.useCounter"
  :class="`severity-${cell.maxSeverity}`"
>
  <span v-if="cell[lvl] !== 0">
    {{cell[lvl]}}
  </span>
</div>

注意使用时要把v-with放在所有用到别名的指令前面，避免指令执行顺序问题导致拿不到变量值。

内容的提问来源于stack exchange，提问作者DraKoan