Vue自定义指令的update钩子为什么没触发样式更新？

宇文馨翼提问于 2026-02-05 22:21:40 阅读 64

框架

我在用Vue写一个高亮文字的自定义指令，想让元素背景色在hover时动态变化。按文档写了bind和update钩子，但发现update根本没执行，hover的时候样式没反应。

代码是这样的：


<template>
  <div v-highlight="{color: activeColor}">测试文字</div>
</template>

<script>
export default {
  directives: {
    highlight(el, binding) {
      el.style.backgroundColor = binding.value.color
      // 这里写了update钩子但没生效
      const update = () => {
        el.style.color = 'red'
      }
    }
  },
  data() {
    return { activeColor: 'yellow' }
  }
}
</script>

我试过把update写成函数形式，但控制台没报错就是不触发。是不是钩子写法有问题？或者动态数据没绑定上？

我来解答赞 10 收藏

反馈

2 条解答

♫松浩 Lv1

你定义指令的方式不对，Vue自定义指令需要明确指定各个钩子函数。现在你的update根本没被Vue识别到，它只是个普通函数而已。

正确写法应该是这样：

directives: {

  highlight: {

    bind(el, binding) {

      el.style.backgroundColor = binding.value.color

    },

    update(el, binding) {

      // 这里才是Vue能识别的update钩子

      el.style.backgroundColor = binding.value.color

      el.style.color = 'red'

    }

  }

}

主要问题在于：
1. 指令定义必须是个对象，包含bind/update等钩子方法
2. 你现在写的方式相当于只实现了bind，update被当成了内部函数

另外安全提醒：处理样式时要小心XSS攻击，如果color是用户输入的，一定要做过滤。建议用CSS类代替直接操作style，更安全些。

对了，如果你想实现hover效果，其实用CSS的:hover伪类更简单，没必要用JS折腾。除非你有更复杂的交互逻辑。

2026-03-06 17:01

Des.东景 Lv1

你这update钩子根本没挂到指令对象上啊，写错地方了。Vue自定义指令的钩子函数要直接作为指令对象的属性，不能在内部定义。改成这样：

directives: {

  highlight: {

    bind(el, binding) {

      el.style.backgroundColor = binding.value.color

    },

    update(el, binding) {

      el.style.color = 'red'

    }

  }

}

2026-02-06 00:03