vue使用自定义指令绑定至多个dom元素上会集体触发componentUpdated钩子

<template>
  <div class="entry">
    <input type="text" v-test v-model="a" id="a">
    <input type="text" v-test v-model="b" id="b">
  </div>
</template>

<script>
  export default {
    name: 'entry',
    data () {
      return {
        a: 1,
        b: 2
      }
    }
    directives: {
      test: {
        componentUpdated (el) {
          console.log(el)
        }
      }
    }
  }
</script>

代码如上,在任意一个输入框进行输入都会触发componentUpdated,因而打印两次对应的el。官方文档也说componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。,我的理解是:绑定至哪个元素上面,当对应元素及其子元素更新才调用。两个input为兄弟元素,更新一个应该不影响另一个才对,还是说我理解的有问题。望指正。

阅读 4.4k
2 个回答

这里的update是只整个组件的update,虽然最终只是更新了一个input,但是其实已经触发了你这个entry组件的update函数

遇到同样的问题了,
改变其中一个的值,会触发所有指令绑定dom

图片描述

请问该如何区分呢?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题