Vue 自定义指令怎么读取对象参数和修饰符变化

Vue 自定义指令的参数都集中在钩子的第二个参数 binding 中：对象表达式放在 binding.value，冒号后的参数放在 binding.arg，点号后的修饰符会变成布尔值对象，更新钩子还可以读取 binding.oldValue。因此不要把一整串模板语法当成一个字符串解析，而是按字段读取。

官方地址：https://vuejs.org/

最小记忆法：值看 value，参数看 arg，修饰符看 modifiers，前后变化看 oldValue。除 el 外，钩子参数应当只读。

模板里的参数怎样进入 binding

下面这条指令同时使用对象参数、动态参数和两个修饰符。对象表达式的结果不会拆散到 binding 顶层，而是完整放在 binding.value 中；:label 对应 arg，.strong.muted 对应两个布尔字段。

  待处理

钩子收到的重点字段可以这样理解：value 是对象，arg 是字符串 label，modifiers 类似 { strong: true, muted: true }。如果写成 v-mark:[currentArg]，参数会跟随 currentArg 的响应式变化更新。

对象参数和修饰符要分开读取

指令适合处理低层 DOM 操作。为了让初始化和更新共用一套规则，可以把 DOM 写入收拢到函数中，再分别挂到 mounted 与 updated。这里用可选链处理空值，用默认颜色避免对象暂时不完整时写入非法样式。

// 中文注释：只从 binding 读取数据，不改写 binding 对象
function applyMark(el, binding) {
  const options = binding.value || {}
  const color = options.color || '#64748b'
  const text = options.text || el.textContent || ''

  // 中文注释：参数决定数据属性名，strong/muted 决定视觉开关
  el.dataset[binding.arg || 'mark'] = text
  el.style.color = binding.modifiers.muted ? '#94a3b8' : color
  el.style.fontWeight = binding.modifiers.strong ? '700' : '400'
}

const vMark = {
  mounted(el, binding) {
    // 中文注释：首次挂载时把对象值映射到元素
    applyMark(el, binding)
  },
  updated(el, binding) {
    // 中文注释：更新钩子可同时拿到新值和旧值，按需比较后再写 DOM
    if (binding.value !== binding.oldValue) {
      applyMark(el, binding)
    }
  }
}

修饰符不是数组，也不是需要手动拆分的字符串；读取 binding.modifiers.strong 即可。对象值的字段名由模板约定，指令内部最好提供默认值，避免把 undefined 直接写进样式或数据属性。

updated 中怎样判断新值和旧值

beforeUpdate 和 updated 都能读取 oldValue。如果对象引用发生变化，可以用上面的引用比较减少重复写入；如果调用方原地修改同一个对象，引用可能不变，这时应比较真正影响 DOM 的字段，或者让调用方返回新对象。

// 中文注释：只比较会影响元素的字段，避免无关字段触发 DOM 写入
function shouldRefresh(next, previous) {
  return next?.text !== previous?.text || next?.color !== previous?.color
}

const vBadge = {
  updated(el, binding) {
    // 中文注释：oldValue 仅在更新钩子可用，首次挂载不要依赖它
    if (shouldRefresh(binding.value, binding.oldValue)) {
      el.style.backgroundColor = binding.value?.color || 'transparent'
      el.textContent = binding.value?.text || ''
    }
  }
}

不要修改 binding.value、binding.arg 或 binding.modifiers。如果多个钩子需要共享状态，可把少量状态放在元素的 dataset 或由外部响应式数据管理，而不是给只读参数增加自定义字段。

几个容易混淆的边界

另外，自定义指令主要面向普通元素的低层 DOM 操作。把它直接用在多根组件上可能被忽略并产生警告；如果需求只是声明式地绑定属性，优先使用普通模板指令。

相关问题

为什么 binding.value 看起来没有更新？

先确认模板表达式返回了新对象，或者比较对象内真正使用的字段。原地修改同一对象时，引用比较不一定能发现变化。

动态参数应该在哪里读取？

从 binding.arg 读取。使用 v-mark:[currentArg] 时，参数会随绑定表达式的响应式值更新。

可以在钩子里修改 modifiers 吗？

不应该。除了绑定元素 el，其他钩子参数都按只读数据处理；要共享状态请改用元素数据属性或外部状态。