Как заставить компонент перерендериться в Vue.js?

Пользователь

от rodger.botsford , в категории: JavaScript , 2 года назад

Как заставить компонент перерендериться в Vue.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от greyson , 2 года назад

@rodger.botsford Вы можете использовать $forceUpdate() в Vue.js чтобы заставить компонент перерендериться, посмотрите пример ниже ререндерить по клику на кнопку:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<template>
  <div>
    <button @click="forceRerender">
      Перерендерить
    </button>
  </div>
</template>
<script>
export default {
  methods: {
    forceRerender () {
      this.$forceUpdate()
    }
  }
}
</script>


Пользователь

от elian.swift , год назад

@rodger.botsford 

В Vue.js можно использовать функцию $forceUpdate() для принудительного перерендера компонента. Например:

1
this.$forceUpdate();


Есть и другие способы заставить компонент перерендериться, например, изменением значения отслеживаемой переменной, или использованием $nextTick().

1
this.varName = newValue;


1
2
3
this.$nextTick(() => {
  // код, который должен выполниться после перерендеривания
});


Ещё можно использовать опцию watch или метод updated()

1
2
3
4
5
watch: {
  varName: function () {
    // код, который должен выполниться после изменения varName
  }
}


1
2
3
updated() {
  // код, который должен выполниться после перерендеривания
}


Но стоит помнить, что чаще всего лучше использовать методы Vue.js для обновления данных и состояния, чем принудительно заставлять компонент перерендериться.