Vue2中pusher channel.bind回调无法访问外部实例数据如何解决

回调内this指向错误。你传入channel.bind的是普通function，普通函数的this由运行时调用方决定，Pusher触发事件回调时会将内部上下文绑定到Pusher自身实例，不会自动指向外层的Vue组件，所以访问this.orders会得到undefined。这和watch配置、组件方法本身逻辑没有关系，所以你之前调整watch的操作不会生效。

三种常用写法选一种即可：

• 方案1：使用箭头函数（最推荐，Vue项目里最常用的写法）
  箭头函数没有自身的this绑定，会直接继承外层作用域（也就是created生命周期内的Vue组件实例）的this，修改代码如下：

console.log(this.orders) // 位于channel.bind外部，可正常打印
var pusher = new Pusher('my pusher key', {
    cluster: 'ap2'
});
var channel = pusher.subscribe('my-channel');
// 把普通function改为箭头函数
channel.bind('my-event', (data) => {
    console.log('anything here')
    console.log(this.orders) // 可正常获取组件上的orders值
});

• 方案2：外层缓存组件实例引用
  在绑定事件之前，先把当前Vue组件的this存到一个变量里，回调内直接访问这个缓存的变量，不受回调内部this指向影响：

console.log(this.orders)
// 提前缓存组件实例
const vm = this
var pusher = new Pusher('my pusher key', {
    cluster: 'ap2'
});
var channel = pusher.subscribe('my-channel');
channel.bind('my-event', function(data) {
    console.log('anything here')
    console.log(vm.orders) // 通过缓存的vm访问组件数据
});

• 方案3：显式绑定回调的this指向
  用Function.prototype.bind手动把回调函数的this强制绑定到当前Vue组件实例上：

console.log(this.orders)
var pusher = new Pusher('my pusher key', {
    cluster: 'ap2'
});
var channel = pusher.subscribe('my-channel');
channel.bind('my-event', function(data) {
    console.log('anything here')
    console.log(this.orders)
}.bind(this)); // 末尾绑定当前Vue实例作为回调的this

注意：如果后续需要解绑Pusher事件，箭头函数和bind绑定的函数需要提前把函数引用存下来，不然没法准确传入解绑函数的参数。

内容的提问来源于stack exchange，提问作者softya