Vue.js变量在Socket.io中的可见性问题：无法更新location

你遇到的核心问题是箭头函数的this指向限制：箭头函数不会绑定自身的this，它的this继承自外层作用域，而非当前的Vue组件实例，所以在sockets回调里用箭头函数时，this根本指向不到你的组件，自然无法访问data里的location变量。

最简单的解决方案是把箭头函数换成普通函数，这样回调里的this会自动绑定到Vue组件实例，就能正常访问和更新location了：

export default { 
  name: 'App', 
  data () { 
    return { 
      location: {lat:10, lng:10} 
    } 
  },
  sockets: { 
    connect() { // 替换为普通函数
      console.log('socket connected') 
    },
    location(val) { // 替换为普通函数
      this.location = val // 现在可以正常访问并更新变量了！
    } 
  } 
}

如果因为特定场景你一定要用箭头函数，也可以提前在组件生命周期钩子中保存Vue实例的引用，再在回调里使用这个引用：

export default { 
  name: 'App', 
  data () { 
    return { 
      location: {lat:10, lng:10} 
    } 
  },
  created() {
    const vm = this // 保存Vue实例的引用
    // 手动监听socket事件，替代sockets对象的写法
    this.$socket.on('location', (val) => {
      vm.location = val
    })
  },
  sockets: { 
    connect: ()=> { 
      console.log('socket connected') 
    }
  } 
}

不过第一种用普通函数的方式最贴合Vue-Socket.io的设计习惯，推荐优先使用。

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