Vue principles Methods – source version

Writing an article is not easy, click a like brother focus on Vue source code sharing, the article is divided into vernacular version and source version, vernacular version to help understand the working principle, source version to help understand internal details, let us study together based on Vue version [2.5.17]

If you think the layout is ugly, please click the link below or pull to the following public account can also be

Vue principles Methods – source version

Today, we read the source code of methods. In fact, methods are quite simple, so WE don’t plan to publish the vernacular version. But methods let me realize this important knowledge point again

How do methods use instance access?

Methods are so simple that you can imagine them with your feet

So what’s the answer to the question now

“Iterate over the methods object and copy it to the instance one by one?”

Yes, you guessed it, copy one by one, simplified source code is written this way

function initMethods(vm, methods) {    
    for (var key in methods) {
        vm[key] = 
            methods[key] == null? noop : bind(methods[key], vm); }}Copy the code

How do methods fix scopes

In fact, the only point of fixed scope of methods is bind, which I’m sure you’ve all used

Bind is a fixed function scope. To be honest, I didn’t use bind very much. I thought I could just call and apply, but now I regret it

Calling bind returns the scoped function that is already fixed when executed directly

Unlike call and Apply, which have a one-time binding scope, this one will benefit you for life

Vue uses bind to remove the methods method, obviously in order to avoid the error of some people, simply fixed scope, and considering that some browsers do not support bind

So I wrote a compatible method, which says something like this

The bind function needs to pass in the scope context and function A

2. The closure then saves the context and returns a new function B

3. When B executes, use the call method to bind function A’s scope to the closure’s saved context

Vue Bind = Vue Bind = Vue Bind = Vue Bind = Vue Bind

function polyfillBind(fn, ctx) {    
    function boundFn(a) {        
        var l = arguments.length;        
        return l ?
            (
                l > 1 ?
                fn.apply(ctx, arguments) :
                fn.call(ctx, a)
            ):
            fn.call(ctx)
    }
    boundFn._length = fn.length;    
    return boundFn
}

function nativeBind(fn, ctx) {    
    return fn.bind(ctx)

}

var bind = Function.prototype.bind ?
    nativeBind :
    polyfillBind;
Copy the code

How does Vue benefit us when it uses BIND?

We call instance methods instead of using instance methods every time

What is the advantage of using local variables directly to reduce the scope chain retrieval when a method is called multiple times, after being saved using local variables

methods:{
    test() {},getName(){this.test() this.test() {this.test()test = this.test
        test(a)test()}}Copy the code

Bind The binding scope is too strong to change

For chestnuts

function a(){    
    console.log(this)
}

var b={ name:1 }
var c = a.bind(b)
var d={
    c:c,    
    woqu:3434333
}
c()
d.c()
Copy the code

C and D.C. perform print the following results

The essence of methods is bind, which is very useful

conclusion

Methods are copied to instances one by one

2. The methods method uses bind to the instance scope to ensure that the scope is not modified