Правильный способ принудительного повторного рендеринга компонента в Vue

Vue.js

Автор: Майкл Тиссен

Переводчик: Front-end Xiaozhi

Источник: Хакернун

Ставь лайк и смотри, поиск в WeChat【Переезд в мир】Обратите внимание на этого человека, который не имеет большого фабричного прошлого, но имеет восходящий и позитивный настрой. эта статьяGitHub GitHub.com/QQ449245884…Он был включен, статьи были классифицированы, и многие мои документы и учебные материалы были систематизированы.

Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.

Иногда полагаться на реактивный способ обновления данных Vue недостаточно, вместо этого нам нужно вручную повторно отобразить компонент для обновления данных. Или мы можем просто захотеть выбросить текущий DOM и начать заново. Итак, как сделатьVueКак насчет правильного повторного рендеринга компонента?

Лучший способ заставить Vue перерендерить компонент — установить его на компоненте.:key. Когда нам нужно повторно отобразить компонент, просто изменитеkeyзначение, Vue повторно визуализирует компонент.

Это очень простое решение.

Конечно, вас могут заинтересовать другие способы:

  • Простой и грубый способ: перезагрузить всю страницу
  • Неправильный способ: использоватьv-if
  • Лучший способ: используйте встроенный в VueforceUpdateметод
  • Лучший способ: сделать это на компонентеkeyИзменять

Простой и грубый способ: перезагрузить всю страницу

Это эквивалентно перезагрузке компьютера каждый раз, когда вы хотите закрыть приложение.

Этот способ может сработать, но это очень плохое решение,Не делай это, давайте посмотрим на лучший способ.

Неправильный способ: использоватьv-if

v-ifДиректива, эта инструкция только в компонентеtrueвремя рендерить. еслиfalse, то компонент находится вDOMне существует в .

приди и посмотри,v-ifкак это работает, вtemplateв дополненияv-ifинструкция:

<template>
  <my-component v-if="renderComponent" />
</template>

существуетscriptв использованииnextTickМетоды

<script>
  export default {
    data() {
      return {
        renderComponent: true,
      };
    },
    methods: {
      forceRerender() {
        // 从 DOM 中删除 my-component 组件
        this.renderComponent = false;
        
        this.$nextTick(() => {
          // 在 DOM 中添加 my-component 组件
          this.renderComponent = true;
        });
      }
    }
  };
</script>

Вышеупомянутый процесс примерно выглядит следующим образом:

  1. Только началrenderComponentУстановить какtrue, поэтому рендерингmy-componentкомпоненты

  2. когда мы звонимforceRerender, мы немедленноrenderComponentУстановить какfalse

  3. мы прекращаем рендерингmy-component,так какv-ifТеперь инструкция оценивается какfalse

  4. существуетnextTickлейтенант методаrenderComponentотставить назадtrue

  5. когдаv-ifРезультатом расчета инструкции являетсяtrue, визуализировать сноваmy-component

В этом процессе более важны две части

Во-первых, нам нужно подождать, покаnextTick, иначе мы не увидим никаких изменений.

существуетVue, тик — это цикл обновления DOM. Vue соберет все обновления, сделанные за один и тот же тик, и в конце тика отобразит содержимое в DOM на основе этих обновлений. Если мы не будем ждать следующего тика, мы правыrenderComponentОбновление будет автоматически отменено и ничего не изменится.

Во-вторых, когда мы визуализируем второй раз, Vue создаст совершенно новый компонент. Vue уничтожит первый и создаст новый, то есть наш новыйmy-componentпройдет все свои жизненные циклы как обычно -created,mountedЖдать.

Кроме того,nextTickМожет использоваться с промисами:

forceRerender() {
  // 从 DOM 中删除 my-component 组件
  this.renderComponent = false;

  this.$nextTick().then(() => {
    this.renderComponent = true;
  });
}

Однако это не очень хорошее решение, поэтому давайте сделаем то, что Vue хочет от нас.

Лучший подход: метод forceUpdate

Это один из двух лучших способов решения этой проблемы, официально поддерживаемых Vue.

Обычно Vue реагирует на изменения в зависимостях, обновляя представления. Однако, когда мы вызываемforceUpdate, также можно принудительно выполнить обновление, даже если ни одна из зависимостей фактически не изменилась.

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

Если Vue обновляется автоматически, когда что-то меняется, зачем нам принудительное обновление?

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

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

Существует два разных метода, которые можно вызывать для самого экземпляра компонента и глобально.forceUpdate:

// 全局
import Vue from 'vue';
Vue.forceUpdate();

// 使用组件实例
export default {
  methods: {
    methodThatForcesUpdate() {
      // ...
      this.$forceUpdate();
      // ...
    }
  }
}

Важно: это не обновляет никакие вычисляемые свойства, вызываяforceUpdateПросто принудительно повторите рендеринг представления.

Лучший способ: сделать это на компонентеkeyИзменять

Во многих случаях нам нужно повторно визуализировать компоненты.

Чтобы сделать это правильно, мы предоставимkeyсвойства, чтобы Vue знал, что определенный компонент связан с определенным фрагментом данных. еслиkeyостается прежним, компонент не будет изменен, но еслиkeyКогда происходит изменение, Vue знает, что он должен удалить старый компонент и создать новый.

Как раз то, что нам нужно!

Но сначала нам нужно сделать небольшое отступление, чтобы понять, почему в Vuekey.

Зачем нам нужно использовать ключи в Vue

Как только вы это поймете, это будет лишь небольшой шаг к пониманию того, как правильно принудительно выполнить повторный рендеринг.

Предположим, мы хотим отобразить список компонентов с одним или несколькими из следующих элементов:

  • иметь местное государство

  • какой-то процесс инициализации, обычно вcreatedилиmountedкрюк

  • Неотвечающие манипуляции с DOM через jQuery или простой API

Если вы сортируете список или обновляете его каким-либо другим способом, некоторые части списка необходимо будет перерисовать. Однако вам не хотелось бы повторно отображать все в списке, только измененное содержимое.

Чтобы помочь Vue отслеживать, что изменилось, а что не изменилось, мы предоставляемkeyАтрибуты. Здесь используется индекс массива, потому что индекс не привязан к конкретному объекту в списке.

const people = [
  { name: 'Evan', age: 34 },
  { name: 'Sarah', age: 98 },
  { name: 'James', age: 45 },
];

Если мы отобразим его с помощью индекса, мы получим следующий результат:

<ul>
  <li v-for="(person, index) in people" :key="index">
    {{ person.name }} - {{ index }}
  </li>
</ul>

// Outputs
Evan - 0
Sarah - 1
James - 2

Если вы удалитеSarah,получить:

Evan - 0
James - 1

иJamesСвязанный индекс изменяется, даже еслиJamesвсе ещеJames.Jamesбудет перерисован, а это не то, что нам нужно.

Так что здесь мы можем использовать толькоidприйти какkey

const people = [
  { id: 'this-is-an-id', name: 'Evan', age: 34 },
  { id: 'unique-id', name: 'Sarah', age: 98 },
  { id: 'another-unique-id', name: 'James', age: 45 },
];

<ul>
  <li v-for="person in people" :key="person.id">
    {{ person.name }} - {{ person.id }}
  </li>
</ul>

прежде чем мы удалим из спискаSarahРаньше Vue удалялиSarahиJamesкомпоненты, то дляJamesСоздается новый компонент. Теперь Vue знает, что можетEvanиJamesСохраните эти два компонента, все, что нужно сделать, это удалитьSarahиз.

Если мы добавим к спискуperson, Vue также знает, что вы можете сохранить все существующие компоненты и просто нужно создать новый компонент и вставить его в нужное место. Это очень полезно, когда у нас есть более сложные компоненты, которые имеют свое собственное состояние, имеют логику инициализации или выполняют какие-либо манипуляции с DOM.

Итак, давайте посмотрим, используется ли лучший способ повторного рендеринга компонента.

Измените ключ, чтобы принудительно выполнить повторный рендеринг компонента.

В конце концов, это лучший способ (на мой взгляд) заставить Vue перерендерить компонент.

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

Это очень простой метод

<template>
  <component-to-re-render :key="componentKey" />
</template>


export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;  
    }
  }
}

КаждыйforceRerenderПри звонке нашcomponentKeyизменится. Когда это произойдет, Vue будет знать, что он должен уничтожить компонент и создать новый. Мы получаем дочерний компонент, который повторно инициализирует себя и «сбрасывает» свое состояние.

Если вам нужно что-то перерендерить, выберитеkeyИзмените метод, а не другой метод.

Ошибки, которые могут существовать после развертывания кода, нельзя узнать в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку логов.Кстати, всем рекомендую полезный инструмент мониторинга ошибок.Fundebug.

оригинал:hacker noon.com/he и -правильно…

общаться

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.

Категории