<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为兄弟元素,更新一个应该不影响另一个才对,还是说我理解的有问题。望指正。
这里的update是只整个组件的update,虽然最终只是更新了一个input,但是其实已经触发了你这个entry组件的update函数