Vue: хак для запуска обновления представления

внешний интерфейс Debug Vue.js

предисловие

Хак, который запускает обновление представления, что это за хак? Взламывайте обновления, которые изменяют данные, но не обнаруживаются vue! Итак, в каких ситуациях vue не может обнаружить изменения в данных? Существует два типа официальных описаний:

  • множество
  1. Обновлять элементы массива с помощью индексов;
  2. Используйте присваивание, чтобы изменить длину массива;
  3. Используйте индексы для добавления или удаления элементов массива;
  • объект
  1. Добавление и удаление объектов
  • разное
  1. такие как реквизиты исходных свойств дочерних компонентов ... Подробности смотрите в другой статье:[Портал: Vue: не удается обнаружить случай обновления объекта/массива]

текст

Итак, как взломать? !

Принцип тоже очень прост~

Поскольку vue не может обнаружить изменения в данных, он заставит vue обновиться! Но vue не предоставляет такого интерфейса (я имею в виду унифицированный интерфейс, а не официальное решение), если он предоставляется, это не называется хаком, верно!

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

Конкретный подход:После изменения данных, которые vue не может обнаружить, измените данные, которые может обнаружить vue, например, обновите случайное число.

упражняться

<div id="app" v-cloak :data-counter="counter">
  <dl>
    <span v-for="(item, index) in arrs">{{ index === 0 ? '' : ', ' }}{{ item }}</span>
  </dl>
  <dl v-for="(item, key) in items">{{key}}: {{item}}</dl>
  <button @click="operate('add')">add</button>
  <button @click="operate('delete')">delete</button>
  <button @click="operate('update')">update</button>
  <button @click="operate('updateArrs')">update arrs</button>
</div>

new Vue({
  el: '#app',
  data: {
    useCounter: true,
    counter: 0,
    arrs: [0, 1, 2, 3, 4],
    items: {
      name: 'isaac',
      position: 'coder'
    }
  },
  watch: {
    items: {
      deep: true,
      handler(val, oldVal) {
      	console.log({ val, oldVal });
      }
    }
  },
  methods: {
    env(callback) {
      callback && callback();
      this.useCounter && this.counter++;
    },
    operate(order) {
      if(order === 'add') {
      	this.env(() => {
          this.items.goodAt = 'javascript';
        });
      } else if(order === 'delete') {
        this.env(() => {
          delete this.items.goodAt;
        });
      } else if(order === 'update'){
      	this.items.name = Math.random();
      } else if(order === 'updateArrs') {
      	this.env(() => {
          this.arrs[0] = Math.round(Math.random() * 100);
        });
      }
    }
  }
});

Как упоминалось в предисловии, один из них будет обновлен позже.data.counter,а такжеdata.counterЕго можно обнаружить, чтобы обнаружить!

недостаток

Хотя этот хак запускает обновление представления, у него есть недостаток:

  • Соответствующие часы в том, что никакие изменения данных не могут быть обнаружены!

Так что лучше использовать официальное решение!

Последнее слово

Вышеупомянутый хак - это то, что я нашел на практике, так и должно быть, когда речь идет об отладке! Поскольку я сам его чистил, я знаю, что обновление представления не может быть запущено в случае с массивами и объектами, но представление волшебным образом обновляется один раз! Затем начинайте медленно тестировать~

Категории