Могу ли я редактировать данные VUE по ссылке? - PullRequest
Новая
       15

Могу ли я редактировать данные VUE по ссылке?

0 голосов
/ 23 мая 2019

Позвольте мне привести пример, чтобы объяснить мою проблему.

Пример: у меня есть класс person, похожий на этот 

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    celebrateBirthday() {
        console.log("Happy Birthday");
        this.age += 1;
    }
}

, и я использую этот класс внутри vue вот так 

data() {
    return {
        person: new Person("Kireeti", 26)
    }
},
mounted() {
    this.person.celebrateBirthday();
}

обычно мы бы

mounted() {
    this.person.age += 1 
}

но я хочу сделать это в классе по понятным причинам.это работает для меня, потому что объекты имеют ссылки.Но мне интересно, я могу это сделать?

У кого-нибудь есть идеи?

Ответы [ 2 ]

1 голос
/ 23 мая 2019

При манипулировании объектами из таких компонентов, как здесь: 

data() {
    return {
        person: new Person("Kireeti", 26)
    }
},
mounted() {
    this.person.celebrateBirthday();
}

Этот способ на самом деле возможно лучше , чем просто this.person.age += 1 в компоненте.

причина в том, что хотя добавить 1 год к person.age действительно просто, другие объекты могут иметь более сложные условия.Возможно, вы изменили свой код так, чтобы у celebrateBirthday были некоторые ограничения, или сделали больше изменений в состоянии человека, кроме возраста.

Вы абсолютно не хотите обрабатывать эту логику в компоненте Vue, поскольку другие компоненты могут также использовать Person объекты.Сохранение этой логики в классе кажется лучшим подходом.

Возможные предостережения

Вещи, которые могут пойти не так, используя ссылки на объекты, все имеют отношение к реактивность .Если Person имел массив friends, и если ваш компонент полагается на его изменения, например: 

<friend-component v-for="friend in friends" :data="friend" />

Вы должны быть осторожны и модифицировать внутренний массив person 10 * таким образомчто Vue может отслеживать .Вы не можете положиться на Наборы или Карты . есть и некоторые другие ограничения .Также вам нужно быть осторожным, чтобы установить {deep: true} при просмотре изменений объектов.

Однако все это одинаково для переменных, принадлежащих вашему компоненту Vue или объекту: в принципе, нет никаких проблем, полагаясь на объектыссылки, насколько я знаю.

0 голосов
/ 23 мая 2019

Я полагаю, нет ничего плохого в том, чтобы использовать его классным способом.

...