防止对象在分配给组件属性时被转换为反应性对象

Question

这个有点奇怪，抱歉。

我正在使用第三方库从 API 获取一些数据

import lib from 'third-party'
import Vue from 'vue'

@Component({})
export default UserComponent extends Vue{
  public user = null as lib.User | null

  mounted(){
    lib.getUser().then((val: lib.User) => {
      this.user = val; /// this is where things blow up
    })
  }
} // this is from memory, but it looks like a decent recreation ¯\_(ツ)_/¯

因此，lib 从 API 调用中获取响应，并使用它来生成 lib.User 类型的实例。到目前为止一切都很好，但是一旦我将响应分配给组件中的属性，新的“lib.User”实例中的几个函数就会触发，并且我开始收到大量错误。

我的猜测是 Vue 正在将对象属性转换为反应性属性，这会导致事件触发。

如果我可以避免的话，我希望在组件中有这个对象，而不必将它映射到本地生成的对象。

有没有办法阻止这种行为？

Answer 1

假设您的问题的原因是由于对象被响应，那么您可以通过 3 种方式避免这种情况发生。

方式 1

不要将user 定义为组件实例上的响应式数据属性。我不确定如何在 Typescript 中执行此操作，但通常您会从数据对象中省略 user，而是在 created 挂钩中初始化 this.user。

这样做的结果是this.user 属性不会是反应性的。这可能不是你想要的。

方式 2

如果你将冻结的对象分配给this.user，那么 Vue 不会使对象反应：

this.user = Object.freeze(user)

这样做的结果是user 对象上的所有属性都将变为只读，这可能不是您想要的。

您可以改用Object.seal() 或Object.preventExtensions()。

方式 3

您可以通过将 _isVue 属性分配为 true 来欺骗 Vue，使其认为 user 对象已经是响应式的；这样 Vue 就不会观察到它。

user._isVue = true
this.user = user

这样做的结果是它不是一个公共 API（据我所知），因此它可能会在未来发生变化（我认为它可能会出现在 Vue 3 中）。