鍍金池/ 問答/HTML/ vue使用自定義指令綁定至多個dom元素上會集體觸發(fā)componentUpdat

vue使用自定義指令綁定至多個dom元素上會集體觸發(fā)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>

代碼如上,在任意一個輸入框進行輸入都會觸發(fā)componentUpdated,因而打印兩次對應(yīng)的el。官方文檔也說componentUpdated:指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。,我的理解是:綁定至哪個元素上面,當對應(yīng)元素及其子元素更新才調(diào)用。兩個input為兄弟元素,更新一個應(yīng)該不影響另一個才對,還是說我理解的有問題。望指正。

回答
編輯回答
淺時光

這里的update是只整個組件的update,雖然最終只是更新了一個input,但是其實已經(jīng)觸發(fā)了你這個entry組件的update函數(shù)

2018年9月4日 03:20
編輯回答
擱淺

遇到同樣的問題了,
改變其中一個的值,會觸發(fā)所有指令綁定dom

圖片描述

請問該如何區(qū)分呢?

2018年2月12日 20:48