本文探讨了 Vue.js 中 methods 对象内的方法如何互相调用，以及 this 的作用域问题。当在 methods 中直接调用另一个方法时，this 指向当前 Vue 实例，允许访问实例数据。然而，通过 $options 访问方法时，this 并未绑定，可能导致丢失上下文。Vue 源码显示，methods 中的方法在初始化时被绑定到实例，确保了正确使用 this。
vuejs中method中的方法可以互相调用吗，在methods中调用后变量的作用于是怎样的？
new Vue({
el: '#app',
data: {
test:111,
},
methods: {
test1:function(){
alert(this.test)
},
test2:function(){
alert("this is test2")
alert(this.test) //test3调用时弹出undefined
},
test3:function(){
this.$options.methods.test2();
}
}
})
http://runjs.cn/code/hv2gdiuf
methods中的function中的this指向vue实例，其他的没什么
这种调用方式是直接访问test2函数，没有任何的this绑定，所以肯定访问不到
this.$options.methods.test2();
而直接调用this.test2()，内部肯定做了this绑定的，例如
this.$options.methods.test2.bind(this)();
更新：Vue源码中的处理
/**
* Setup instance methods. Methods must be bound to the
* instance since they might be passed down as a prop to
* child components.
*/
Vue.prototype._initMethods = function () {
var methods = this.$options.methods
if (methods) {
for (var key in methods) {
this[key] = bind(methods[key], this)
}
}
}
function bind (fn, ctx) {
return function (a) {
var l = arguments.length
return l
? l > 1
? fn.apply(ctx, arguments)
: fn.call(ctx, a)
: fn.call(ctx)
}
}
直接this.test1(), this.test2()
784
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
