In Vue source code, why can two identical methods be executed when they are mounted on Vue?

fun88liveids edited in Wed, 28 Dec 2022

entry-runtime-with- compiler.js within

const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && query(el)
  /* istanbul ignore if */
  if (el === document.body || el === document.documentElement) {
    process.env.NODE_ENV !== 'production' && warn(
      `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
    )
    return this
  }
//太长了贴一部分

/runtime/ index.js

Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}

Then I created a few JS to try, why not test.js

function va(){}
export {va}

test1.js

import {va} from './test.js'
va.prototype.hei = function(){
    alert(1)
    console.log(1)
}

test2.js

import {va} from './test.js'
const ob = va.prototype.hei
va.prototype.hei = function(){
    alert(2)
    console.log(2)
}

test3.js

import {va} from './test.js'
var a = new va();
a.hei()

In the end, I only Alert2 and printed 2PS: I built several in order to keep similar, but why not

3 Replies

gcdhq

commented on Wed, 28 Dec 2022

Const mount in source code= Vue.prototype. The end of $mount was called again, so it was executed twice

fearhack

commented on Wed, 28 Dec 2022

The last time you revised it va.prototype.hei What you call is what you call. It has something to do with the order you introduce.

NWSDRWindsor

commented on Wed, 28 Dec 2022

    var fn1 = function(){console.log('fn1')}
    var fn2 = fn1
    fn1 = function(){
        console.log('fn1 update');
        fn2.call(this);
    }
    fn1() 
    // --> fn1 update
    // --> fn1