Vue JS воссоздает корневой компонент
Мне нужно уничтожить и воссоздать корневой компонент приложения. Это мой шаблон:
<div id = "app">
{{ num }}
</div>
И это мой код:
if (app) {
app.$destroy();
} else {
app = new Vue(Object.assign({
el: '#app',
}, { data: { num: Math.random() } }))
}
Этот код запускается при нажатии кнопки, но он не очищает шаблон и не обновляет новые данные, которые я передаю. Есть идеи, почему?
Если установлен app, то будет вызываться app.$destroy(), но app = new Vue не потому, что он находится в блоке else, поэтому он не будет воссоздан (app.$destroy не будет волшебным образом очистить переменную app). Но как вы хотите это сделать, вместо того, чтобы обновлять данные?
Это не полная история; Мне нужна эта функциональность.
Зачем вам нужен этот функционал? Пожалуйста, уточните, если вы этого не сделаете, мы можем только угадать
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Ваш конкретный вариант использования не указан в вопросе, но я предполагаю, что вы хотите обновить что-то, что не обновляется автоматически.
Чтобы обновить свой компонент, вы можете использовать
this.$forceUpdate()
для принудительной перезагрузки компонента.
Мне нужно воссоздать приложение, потому что я разрешаю передавать больше, чем данные, вы также можете передавать свои методы, вычисления и т. д.
Я почти уверен, что ваша попытка решить проблему таким образом, чтобы она не решалась, или что вы неправильно используете vue.
Но у вас проблема, когда вы выполняете этот код:
if (app) {
app.$destroy();
}
Тогда в документации указано:
Completely destroy a vm. Clean up its connections with other existing vms, unbind all its directives, turn off all event listeners.
Поэтому они не говорят, что элемент, к которому прикреплено приложение vue, должен измениться или изменится. Если вы хотите очистить DOM, вам нужно удалить содержимое вручную.
После app.$destroy() переменная app все еще будет содержать уничтоженный экземпляр vue (app не будет сброшен волшебным образом). Таким образом, повторное выполнение кода не вызовет срабатывания блока else.
Вы также должны установить app на то, что считается ложным.
if (app) {
app.$destroy();
app = undefined;
}
Теперь app - это undefined, поэтому при следующей оценке состояния if будет оценен блок else и будет создан новый экземпляр.
Вы можете создать плункер? Это все еще не работает. Взгляд не меняется.
@undefined вы, скорее всего, не восстанавливали содержимое app, чтобы снова содержать временную разметку. Потому что этот рабочий пример работает нормально. Но все же это, скорее всего, неправильный способ решения проблемы, чего бы вы ни хотели достичь.
@undefined это то, что вы написали в своем коде. Выньте new Vue из блока else, и вам не нужно будет щелкать. Вы не очень осведомлены о том, что именно вы хотите делать и почему.
Вы можете использовать app. $ ForceUpdate ()