Vue добавляет представление данных, не обновляет проблему

Vue.js

предисловие

Когда мы передаем данные в свойство данных экземпляра Vue для завершения обновления представления, после некоторых операций обнаруживается, что оно не обновляется.consoleДанные обнаружения печати — это просто данные объекта JavaScript.

Причина в том, что Vue хочет завершить ответ представления, должен преобразовать обычные данные объекта JavaScript, чтобы иметьgetter/setterданные объекта атрибута. при звонкеsetterПри вызове Vue захватывает данные для завершения обновления адаптивного компонента.Vue.js — глубокое погружение в реактивные принципы

обнаруживать изменения

Способы, которыми разрешено создавать ответы представления, следующие:

  • Добавить начальное значение свойства в качестве узла ответа в данные экземпляра Vue
  • Динамически добавлять узлы ответа с помощью метода $set

пример

Сначала мы подготавливаем два набора данных,jsDataа такжеvueData.

const jsData = {
  ja: "张三",
  jb: "李四"
}
export default {
  data() {
    return {
      vueData: {
        va: "张三",
        vb: "李四"
      }
    }
  },
  mounted() {
    console.log(jsData, this.vueData);
  },
  // ...
}

Видно, что операцияjsDataНе создан в экземпляре vue, не имеетgetter/setter,vueDataСоздайте начальное значение атрибута через атрибут данных в экземпляре vue, чтобы иметьgetter/setter.

Обновление запрещено

Ниже приведены примеры представлений, которые не могут обнаружить изменения:

export default {
  // ...
  mounted() {
    console.log(jsData, this.vueData);
    this.notAllow()
  },
  methods: {
    notAllow() {
      // demo 1
      this.vueData.newKeyA = "keyA";
      console.log(this.vueData);

      // demo 2
      // Object.assign(this.vueData, { newKeyA: "keyA" });
      // console.log(this.vueData);

      // demo 3
      // this.vueData = Object.assign(this.vueData, { newKeyA: "keyA" });
      // console.log(this.vueData);
    }
  }
}

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

результат операции:

разрешить обновления

export default {
  mounted() {
    console.log(jsData, this.vueData);
    this.allow()
  },
  methods: {
    allow() {
      // demo 1
      this.vueData = {
        ...this.vueData,
        newKeyA: "keyA"
      }
      console.log(this.vueData);

      // demo 2
      // this.$set(this.vueData, "newKeyA", "keyA");
      // console.log(this.vueData);
    }
  }
}

Способ приведенного выше demo1 заключается в замене указателя памяти для завершения изменения данных. demo2 — это метод $set, предоставляемый экземпляром Vue, без изменения внутреннего указателя, добавляяgetter/setterсвойства добавлены.

результат операции:

пример

В этой статье представлена ​​демонстрация, см.:GitHub

*Заявление об авторских правах: эта статья является оригинальной и не может быть воспроизведена без разрешения.

Категории