vue自定义指令的问题

Question

我自定义了一个指令，用来给输入框绑定一个 input 事件，获取输入框的 value 的长度，在 update 钩子中用 console.log 输出了一些字符。我给页面上多个输入框使用了这个自定义指令后，任何一个输入框触发input事件，所有的指令都会在控制台输出，并不是仅仅只有触发 input 事件的那个输入框。
请教这是什么原因呢？

//......
bind: function (el) {
  //......
  el.addEventListener('input', ...)
},
update: function(el) {
  console.log(el);
}

<el-input v-mydirective />
<el-input v-mydirective />
<el-input v-mydirective />

Answer 1

你是不是有修改data？修改data触发rerender，从而触发指令update hook被调用

Answer 2

可以先看官网的定义：
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

你这个需求可以这么写，简单贴下代码，供参考：

<template>
  <div id="app">
    {{ len }}
    <input v-foo:len />
    {{ len2 }}
    <input v-foo:len2 />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      len: 0,
      len2: 0,
    };
  },
  directives: {
    foo: {
      bind(el, binding, vnode) {
        const { arg } = binding;
        el.addEventListener("input", (e) => {
          if (arg && vnode.context[arg] !== undefined) {
            vnode.context[arg] = e.target.value.length;
          }
        });
      },
    },
  },
};
</script>