Vue: Use parameter to access Vue instance may be a better than use 'this'.

[libook]

What problem does this feature solve?

'this' is very special in ES. It directly associated with the scope which it lives in.
And I found that I always need to declare variables for keeping Vue instance; for calling them from sub-objects.
So I am thinking that maybe calling Vue instance from parameter is a better way.

What does the proposed API look like?

For example, in methods:

Before:

methods: {
  thisIsAMethod(){
    const vm = this;
    vm.aProptie = 'this is value';
  }
}

After:

methods: {
  thisIsAMethod(vm){
    vm.aProptie = 'this is value';
  }
}

[LinusBorg]

1. This would be a huge breaking change, so can't happen in 2.*
2. it probably won'T happen at all because I don'T think that this problem actually exists.

You say:

I found that I always need to declare variables for keeping Vue instance; for calling them from sub-objects.

Why? More specificaly, what "subobjects" are you referring to?

In my experience, arrow functions solve problems with this nicely.

[Kingwl]

i don't agree that

I always need to declare variables for keeping Vue instance

why you always need to declare variables? maybe you need lambda?

and as what @LinusBorg said

This would be a huge breaking change

[DarynHolmes]

'this' is very special in ES. It directly associated with the scope which it lives in.

Would is not be more correct to say that 'this' is directly associated to the execution context?

@libook it would be easier for us to help you if you provided more examples of where you need to assign this to a variable within a Vue instance.

The variable is not needed within the example you have provided.

This:

methods: {
   thisIsAMethod(){
     const vm = this;
     vm.aProptie = 'this is value';
   }
}

Is equivalent to:

methods: {
   thisIsAMethod(){
     this.aProptie = 'this is value';
   }
}

Places where 'this' can trip you up are in async callbacks, array methods like map etc. You can usually get around these by using arrow functions or by binding the function to explicitly set the value of 'this'.

_This_ might help: http://bytes.schibsted.com/javascript-what-the-hell-is-this/

[posva]

We use this to manipulate component instances. It's the same as using instances of classes (using the new class keyword as the good old functions and prototype)
Passing vm as an argument would make sense in a more functional oriented approach.
With es6 you can reuse this in other functions as well:

myMethod () {
 this.loading = true
 setTimeout(() => {
     this.loading = false
   }, 1000)
}

Maybe that's what you're missing @libook

[DarynHolmes]

It would be great if someone could provide an example where passing vm as an argument would be advantageous over the current approach of using this. Thanks

[yyx990803]

This can't be done for methods due to it being a breaking change. But you can easily implement it yourself: https://jsfiddle.net/n4npzurf/

[libook]

Thank you all for help.

Yes, the example is not good enough.

I can not use 'Arrow function' all the time; 'Arrow function' is not the replacement of 'Function' after all.
I always have to use functions that have names to make huge and complicated programs simple and clear.
And sometimes, I have to use 'this' of objects themselves.
Maybe my programs are so heavy. Yes, it is a heavy dashboard with complicated features.

Well, if this idea will completely break the whole design of Vue; it may be a bad idea.