Vue中computed计算属性返回的方法无法访问data内属性如何解决

解决方案 #

你遇到的问题本质是普通函数的this动态绑定规则导致的：当你通过this.serviceHello.sayHello()调用方法时，普通函数sayHello的this会指向它的调用宿主也就是serviceHello返回的对象，自然无法访问到Vue实例上的data属性。可以通过以下两种常用方案解决：

方案1：提前缓存Vue实例指向 #

在计算属性的顶层作用域先保存Vue实例的this引用，返回的方法内直接使用缓存的实例访问data：

computed: {
    serviceHello() {
      // 此处this为Vue组件实例，提前缓存
      const vm = this
      return {
        sayHello() {
          console.log(vm.hello);
        },
        sayHi(){
          console.log("hi");
        }
      }
    }
}

方案2：将方法改为箭头函数 #

箭头函数没有自身的this，会继承外层作用域的this指向，此处外层作用域就是计算属性的getter函数，this天然指向Vue组件实例：

computed: {
    serviceHello() {
      return {
        // 改为箭头函数
        sayHello: () => {
          console.log(this.hello);
        },
        sayHi(){
          console.log("hi");
        }
      }
    }
}

注意：不要把Vue的生命周期、methods、computed本身的顶层函数改成箭头函数，会导致顶层this丢失指向，仅需要修改计算属性返回的内部对象的方法即可。

修改后调用this.serviceHello.sayHello()就可以正常输出hello。

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