Vue.js
Крючки жизненного цикла
Поиск…
Крючки для Vue 1.x
init
created
$el
, но послеdata observation
computed properties
,watch/event callbacks
иmethods
.
beforeCompile
compiled
directives
связаны, но все еще до появления$el
.
ready
$el
завершаются, и экземпляр вводится в DOM впервые.
attached
$el
привязывается к DOMdirective
или экземпляром, вызывает$appendTo()
.
detached
$el
удаляется / удаляется из метода DOM или экземпляра.
beforeDestroy
destroyed
bindings
иdirectives
уже были несвязаны, а дочерние экземпляры также были уничтожены.
Использование в экземпляре
Поскольку все крюки в течение жизненного цикла Vue.js
являются только functions
, вы можете поместить любого из них непосредственно в экземпляре declaraction.
//JS
new Vue({
el: '#example',
data: {
...
},
methods: {
...
},
//LIFECYCLE HOOK HANDLING
created: function() {
...
},
ready: function() {
...
}
});
Общие ошибки: доступ к DOM с помощью `ready ()` hook
Обычным способом использования ready()
является доступ к DOM, например, для запуска плагина Javascript, получения размеров элемента и т. Д.
Эта проблема
Из-за асинхронного механизма обновления DOM Vue не гарантируется, что DOM полностью обновляется при вызове hook ready()
. Обычно это приводит к ошибке, поскольку элемент не определен.
Решение
Для этой ситуации метод $nextTick()
может помочь. Этот метод отменяет выполнение предоставленной функции обратного вызова до следующего тика, что означает, что он запускается, когда все обновления DOM гарантированно завершены.
Пример:
module.exports { ready: function () { $('.cool-input').initiateCoolPlugin() //fails, because element is not in DOM yet. this.$nextTick(function() { $('.cool-input').initiateCoolPlugin() // this will work because it will be executed after the DOM update. }) } }
Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow