阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Vue.js 中事件绑定的原理

      问题

      Vue中事件绑定的原理

      答案

      • 1.原生dom事件的绑定,采用的是addEventListener实现
      • 2.组件绑定事件采用的是$on方法

      对应源码

      • 事件的编译:
      let compiler = require('vue-template-compiler');
      let r1 = compiler.compile('<div @click="fn()"></div>');
      let r2 = compiler.compile('<my-component @click.native="fn" @click="fn1"></my-component>');
      console.log(r1); // {on:{click}}
      console.log(r2); // {nativeOnOn:{click},on:{click}}  
      

      https://a.axihe.com/focus/vue/20.jpg

      1.原生dom的绑定

      • Vue在创建真是dom时会调用createElm,默认会调用invokeCreateHooks
      • 会遍历当前平台下相对的属性处理代码,其中就有updateDOMListeners方法,内部会传入add方法

      yuan

      function updateDOMListeners (oldVnode: VNodeWithData, vnode: VNodeWithData) {
        if (isUndef(oldVnode.data.on) && isUndef(vnode.data.on)) {
          return
        }
        const on = vnode.data.on || {}
        const oldOn = oldVnode.data.on || {}
        target = vnode.elm
        normalizeEvents(on)
        updateListeners(on, oldOn, add, remove, createOnceHandler, vnode.context)
        target = undefined
      }
      
      function add (
        name: string,
        handler: Function,
        capture: boolean,
        passive: boolean
      ) {
        target.addEventListener( // 给当前的dom添加事件
          name,
          handler,
          supportsPassive
            ? { capture, passive }
            : capture
        )
      }
      

      vue中绑定事件是直接绑定给真实dom元素的

      • 2.组件中绑定事件
      export function updateComponentListeners (
        vm: Component,
        listeners: Object,
        oldListeners: ?Object
      ) {
        target = vm
        updateListeners(listeners, oldListeners || {}, add, remove, createOnceHandler, vm)
        target = undefined
      }
      function add (event, fn) {
        target.$on(event, fn)
      }
      
      

      组件绑定事件是通过vue中自定义的$on方法来实现的

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录