Предотвратить преобразование объекта в реактивный объект при назначении свойству компонента - PullRequest
Новая
       18

Предотвратить преобразование объекта в реактивный объект при назначении свойству компонента

0 голосов
/ 11 июля 2019

Это немного странно, извините.

Я использую стороннюю библиотеку для получения некоторых данных из 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 ¯\_(ツ)_/¯

Поэтому библиотека принимает ответ от APIвызов и использует его для создания экземпляра типа lib.User.Это нормально до этого момента, но как только я назначаю ответ свойству в моем компоненте, запускаются несколько функций в новом экземпляре lib.User, и я получаю большое количество ошибок.

Я предполагаю, что Vue преобразует свойства объектов в реактивные свойства, и это вызывает события.

Я хотел бы иметь этот объект в компоненте и не должен отображать его на локально сгенерированный объект, если ямог бы избежать этого.

Есть ли способ предотвратить такое поведение?

1 Ответ

1 голос
/ 12 июля 2019

Если предположить, что причиной вашей проблемы является реактивность объекта, то вы можете избежать этого тремя способами.

Путь 1

Не указывайте user как свойство реактивных данных в экземпляре компонента. Я не уверен, как это сделать в Typescript, но обычно вы опускаете user из объекта данных и вместо этого инициализируете this.user в хуке created.

Следствием этого является то, что свойство this.user не будет реактивным. Это, вероятно, не то, что вы хотите.

Путь 2

Если вы назначите замороженные объекты на this.user, то Vue не сделает объект реактивным: 

this.user = Object.freeze(user)

Следствием этого является то, что все свойства объекта user станут доступны только для чтения, что, вероятно, не то, что вам нужно.

Вместо этого вы можете использовать Object.seal() или Object.preventExtensions().

Путь 3

Вы можете обмануть Вью, думая, что объект user уже реагирует, назначив ему свойство _isVue в true; таким образом, Vue не будет наблюдать это. 

user._isVue = true
this.user = user

Следствием этого является то, что это не публичный API (насколько я знаю), поэтому он может измениться в будущем (и я предполагаю, что он, вероятно, выйдет Vue 3).

...