Diretório de artigos
1. Conceito de conhecimento rápido:
Chamamos o processo de um objeto desde a criação (novo) até ser destruído (destruir), chamado de ciclo de vida. A função de ciclo de vida é uma função que será executada automaticamente em um determinado momento.
De acordo com as palavras oficiais, cada instância do Vue passa por uma série de processos de inicialização quando é criada - por exemplo, ela precisa configurar o monitoramento de dados, compilar modelos, montar a instância no DOM e atualizar o DOM quando os dados forem alterados, etc. Ao mesmo tempo, algumas funções chamadas ganchos de ciclo de vida também são executadas durante esse processo, o que dá aos usuários a oportunidade de adicionar seu próprio código em diferentes estágios.
Simplificando, cada instância do Vue passa por uma série de processos de inicialização quando é criada: criar a instância, carregar o modelo, renderizar o modelo etc. Vue tem funções de gancho (funções de ouvinte) para cada estado no ciclo de vida. Sempre que a instância do Vue estiver em um ciclo de vida diferente, a função correspondente será acionada para chamar.
2. Oito funções de gancho de ciclo de vida:
| função | Duração da chamada |
|---|---|
| antes de criar | Chamado antes da instância vue ser inicializada |
| criado | Chamado após a instância vue ser inicializada |
| antes da montagem | Chamado antes de montar na árvore DOM |
| montado | Chamado após a montagem na árvore DOM |
| antes de atualizar | Chamado antes da atualização de dados |
| Atualizada | Chamado após atualização de dados |
| antes de destruir | Chamado antes que a instância vue seja destruída |
| destruído | Chamado depois que a instância vue é destruída |
3. Aprendizagem
código básico
Vamos primeiro examinar o código básico do caso da seguinte forma e, em seguida, usar as etapas de código a seguir para demonstrar a função de ciclo de vida executada por um objeto em cada estágio do processo, desde a geração até a destruição. Observe o que a função show faz.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{
{
information}}
</div>
<script type="text/javascript">
//创建vue实例
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
}
})
// 各个生命周期函数通过调用下面这个函数了解其所处的生命阶段
function show(inf,obj){
console.log(inf);
console.log("------------------------------------------");
console.log('获取vue实例data里的数据:');
console.log(obj.information);
console.log("------------------------------------------");
console.log('挂载的对象，就是DOM：');
console.log(obj.$el);
console.log("------------------------------------------");
console.log('页面上已经挂载的DOM：');
console.log(document.getElementById('app').innerHTML);
}
</script>
1. antes de criar:
Neste estágio, a instância vue acaba de ser criada na memória e os dados e métodos não são inicializados neste momento.
Adicione a função de gancho beforeCreate no caso:
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
beforeCreate: function(){
// 传入该阶段简介与this，this就是该阶段的vue实例
show('vue实例初始化之前',this);
}
})
2.criado:
Neste estágio, a instância vue foi criada na memória, dados e métodos também podem ser obtidos, mas o template não foi compilado.
Adicione a função de gancho criada ao caso:
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
created: function(){
show('vue实例初始化之后',this);
}
})
3.antes da montagem：
Esta etapa conclui a compilação do template, mas ainda não foi montado na página.
Adicione a função de gancho ao caso:
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
beforeMount: function(){
show('挂载之前',this);
}
})
4.montado:
Nesta fase, o modelo é compilado e montado na página, e a página pode ser exibida.
Adicione a função de gancho ao caso:
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
mounted: function(){
show('挂载之后',this);
}
})
5.antes da atualização:
Execute esta função antes da atualização da transição de estado. Neste momento, o valor do estado dos dados nos dados foi atualizado para o mais recente, mas os dados exibidos na página ainda são os mais originais e a renderização da árvore DOM foi não foi reiniciado.
Primeiro altere os dados em data:
vm.information = '南极光之夜';
Adicione a função de gancho ao caso:
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
beforeUpdate: function(){
show('更新之前',this);
}
})
6.atualizado:
Nesta fase, esta função é executada após a conclusão da atualização da transição. Neste momento, o valor do estado dos dados nos dados é o mais recente e os dados exibidos na página também são os mais recentes, e o nó DOM foi re-renderizado.
Adicione a função de gancho ao caso:
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
updated: function(){
show('更新之后',this);
}
})
7.antes de destruir：
O estágio beforeDestroy é antes que a instância vue seja destruída. É claro que a instância vue ainda pode ser usada neste estágio.
Destrua a instância do Vue:
vm.$destroy();
```
在案例中添加钩子函数：
```javascript
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
beforeDestroy: function() {
show('销毁之前',this);
}
})
8.destruído:
Esta fase é chamada depois que a instância vue é destruída, quando tudo indicado por todas as instâncias será desvinculado, os ouvintes de eventos serão removidos e as instâncias filhas serão destruídas.
Adicione a função de gancho ao caso:
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
destroyed: function() {
show('销毁之后',this);
}
})