账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue使用自定义指令绑定至多个dom元素上会集体触发componentUpdated钩子
    22
    0
    <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为兄弟元素,更新一个应该不影响另一个才对,还是说我理解的有问题。望指正。

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • ペ青柠檬 超级管理员 1楼

      Vue使用自定义指令绑定至多个dom元素上,会集体触发componentUpdated钩子,这是因为在Vue中,每当组件的数据发生变化时,会触发一次组件的更新。

      这是因为Vue使用了一个叫做"watch"的生命周期方法来监听组件的变化。当组件的数据发生变化时,watch方法会立即调用update方法,并将新的数据绑定到当前的DOM元素上。

      当自定义指令被使用时,它会在watch方法被调用时被注册,所以即使组件的数据没有发生变化,自定义指令也会被触发一次。

      因此,如果你想让多个自定义指令绑定至多个DOM元素上,你需要确保所有的自定义指令都是在同一个watch方法中注册的。这样,当组件的数据发生变化时,所有的自定义指令都会被触发一次,而不是触发多次。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部