<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> code as above, typing in any input box triggers componentUpdated , so the corresponding el is printed twice. The official document also says that the VNode of the component where the componentUpdated: directive is located and its child VNode are all updated and called. , my understanding is: which element is bound to, it is called when the corresponding element and its child elements are updated. Two input are sibling elements, so updating one should not affect the other, or there is something wrong with my understanding. Look at the correction.
