Versão: vue2.X, design ant vue 1.7.8
1. Qual é o ciclo de vida do vue?
Resposta: O ciclo de vida do vue é o processo de descarregamento de um componente após inicialização, montagem, atualização e outras etapas da criação;
É equivalente a um jogo de quebra-cabeça na vida real.
Primeiro, prepare o tabuleiro do quebra-cabeça e os quebra-cabeças espalhados no estágio de inicialização;
monte as peças do quebra-cabeça uma por uma no padrão alvo
no estágio de montagem; Aperte a imagem ou coloque o novo imagem diy onde ela precisa ser colocada; a
etapa de descarregamento equivale ao processo de desmontar e montar o quebra-cabeça montado depois de aproveitá-lo
2. As funções do gancho do ciclo de vida são:
Fase de montagem :
beforeCreate //Antes da criação da detecção de dados e do proxy de dados
criado //A criação da detecção de dados e do proxy de dados é criada
beforeMount //Antes
da montagem montada //A montagem é concluída
Fase de atualização :
beforeUpdate //Atualização antes da atualização
//
Desinstalação ( destruição) estágio após a atualização :
beforeDestroy //antes da desinstalação
destruído //descarregamento completo
do cache (KeepAlive) estágio :
ativado //entra na página do componente desativado // prompt de erro
ao desativar ou sair (mas o componente não é destruído) : errorCaptured //Ao capturar erros de componentes descendentes errorHandler //O componente especificado não capturou a função de tratamento de erros durante a renderização e observação
2.1 Propriedades computadas
computado //
observação de atributo computado // monitoramento de dados
3. Ordem de execução do ciclo de vida
Pratique na página de acordo com o diagrama de exemplo no documento oficial , o código é o seguinte:
página inicial pai
<template>
<div style="padding: 60px">
<h3 style="color: red">父页面</h3>
<a-input v-model="message" style="width: 120px"></a-input>
<div>{
{
message }}</div>
<a-input v-model="test" style="width: 220px"></a-input>
<a-input v-model="testList" style="width: 220px"></a-input>
<h3 style="color: red">csdn博主：{
{
csdnName }}</h3>
<a-button @click="showTap">点击卸载</a-button>
<div>-----------------------------------------</div>
<div v-if="isHomePageShow">
<keep-alive>
<homePage></homePage>
</keep-alive>
</div>
<a-button @click="homePageShowTap">点击隐藏/显示子组件</a-button>
</div>
</template>
<script>
import homePage from './components/homePage.vue'
export default {
name: 'Home',
components: {
homePage,
},
data() {
return {
isHomePageShow: true,
message: 'test',
isImmediate: '是否开启watch数据监听默认调用',
test: '监听数据变动调用一个封装方法',
testList: '监听数据变动调用多个封装方法',
}
},
computed: {
csdnName() {
console.group('------computed计算属性状态------')
const name = '鱼干~'
console.log('%c%s', 'color:red', 'el : ' + this.$el) //undefined
console.log('%c%s', 'color:red', 'data : ' + this.$data) //undefined
console.log('%c%s', 'color:red', 'csdn博主: ' + name)
return name
},
},
watch: {
message: {
handler(newVal, oldVal) {
console.group('------watch数据监听状态------')
console.log('%c%s', 'color:red', 'el : ' + this.$el) //undefined
console.log('%c%s', 'color:red', 'data : ' + this.$data) //undefined
console.log('%c%s', 'color:red', '新值: ' + newVal, '旧值: ' + oldVal)
},
},
isImmediate: {
handler(newVal, oldVal) {
console.group('------watch数据监听在侦听开始之后立即调用、并且无论其被嵌套多深都可侦听状态------')
console.log('%c%s', 'color:red', 'el : ' + this.$el) //undefined
console.log('%c%s', 'color:red', 'data : ' + this.$data) //undefined
console.log('%c%s', 'color:red', '新值: ' + newVal, '旧值: ' + oldVal)
},
immediate: true, //该回调将会在侦听开始之后立即调用，默认是false
deep: true, //该回调将会在被侦听的对象的属性改变时调动，无论其被嵌套多深
},
// 字符串方法名称
test: 'someMethod',
//监听数据变动调用多个封装方法
testList: [
'testListSomeMethod',
function handler2(newVal, oldVal) {
console.group('------watch数据监听调用多个封装方法状态------')
console.log('%c%s', 'color:red', 'el : ' + this.$el) //undefined
console.log('%c%s', 'color:red', 'data : ' + this.$data) //undefined
console.log('%c%s', 'color:red', '新值: ' + newVal, '旧值: ' + oldVal)
},
],
},
beforeCreate: function () {
console.group('------beforeCreate创建前状态------')
console.log('%c%s', 'color:red', 'el : ' + this.$el) //undefined
console.log('%c%s', 'color:red', 'data : ' + this.$data) //undefined
console.log('%c%s', 'color:red', 'message: ' + this.message)
},
created: function () {
console.group('------created创建完毕状态------')
console.log('%c%s', 'color:red', 'el : ' + this.$el) //undefined
console.log('%c%s', 'color:red', 'data : ' + this.$data) //已被初始化
console.dir(this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.message) //已被初始化
},
beforeMount: function () {
console.group('------beforeMount挂载前状态------')
console.log('%c%s', 'color:red', 'el : ' + this.$el) //undefined
console.dir(this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data) //已被初始化
console.log('%c%s', 'color:red', 'message: ' + this.message) //已被初始化
},
mounted: function () {
console.group('------mounted 挂载结束状态------')
console.log('%c%s', 'color:red', 'el : ' + this.$el) //已被初始化
console.dir(this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data) //已被初始化
console.dir(this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.message) //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.dir(this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.dir(this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.message)
},
updated: function () {
console.group('updated 更新完成状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.dir(this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.dir(this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.message)
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.dir(this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.dir(this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.message)
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.dir(this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.dir(this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.message)
},
errorCaptured(err, vm, info) {
console.group('errorCaptured 捕获子孙组件的错误阶段===============》')
console.log(`错误返回: ${err.toString()}\n在哪个钩子发生的错误: ${info}\nvue实例: ${vm}`)
},
methods: {
testListSomeMethod() {
console.log('通过watch调用该testListSomeMethod方法')
},
someMethod() {
console.log('通过watch调用该someMethod方法')
},
homePageShowTap() {
this.isHomePageShow = !this.isHomePageShow
},
showTap() {
this.$destroy('home')
},
},
}
</script>
subpágina da página inicial
<template>
<div>
<h3 style="color: red">子页面</h3>
<div>{
{
message }}</div>
</div>
</template>
<script>
export default {
name: 'HomePage',
data() {
return {
message: '这里是子组件homePage',
}
},
beforeCreate: function () {
console.group('------子组件beforeCreate创建前状态------')
console.log('%c%s', 'color:red', 'el : ' + this.$el) //undefined
console.log('%c%s', 'color:red', 'data : ' + this.$data) //undefined
console.log('%c%s', 'color:red', 'message: ' + this.message)
},
created: function () {
messageTest = '制造错误触发errorCaptured'
console.group('------子组件created创建完毕状态------')
console.log('%c%s', 'color:red', 'el : ' + this.$el) //undefined
console.log('%c%s', 'color:red', 'data : ' + this.$data) //已被初始化
console.dir(this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.message) //已被初始化
},
beforeMount: function () {
console.group('------子组件beforeMount挂载前状态------')
console.log('%c%s', 'color:red', 'el : ' + this.$el) //undefined
console.dir(this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data) //已被初始化
console.log('%c%s', 'color:red', 'message: ' + this.message) //已被初始化
},
mounted: function () {
console.group('------子组件mounted 挂载结束状态------')
console.log('%c%s', 'color:red', 'el : ' + this.$el) //已被初始化
console.dir(this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data) //已被初始化
console.dir(this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.message) //已被初始化
},
beforeUpdate: function () {
console.group('子组件beforeUpdate 更新前状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.dir(this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.dir(this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.message)
},
updated: function () {
console.group('子组件updated 更新完成状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.dir(this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.dir(this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.message)
},
beforeDestroy: function () {
console.group('子组件beforeDestroy 销毁前状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.dir(this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.dir(this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.message)
},
destroyed: function () {
console.group('子组件destroyed 销毁完成状态===============》')
console.log('%c%s', 'color:red', 'el : ' + this.$el)
console.dir(this.$el)
console.log('%c%s', 'color:red', 'data : ' + this.$data)
console.dir(this.$data)
console.log('%c%s', 'color:red', 'message: ' + this.message)
},
activated() {
console.group('------activated缓存阶段，进入组件------')
console.log('%c%s', 'color:red', 'el : ' + this.$el) //undefined
console.log('%c%s', 'color:red', 'data : ' + this.$data) //undefined
console.log('%c%s', 'color:red', 'message: ' + this.message)
},
deactivated() {
console.group('------activated缓存阶段，离开或停用当前组件------')
console.log('%c%s', 'color:red', 'el : ' + this.$el) //undefined
console.log('%c%s', 'color:red', 'data : ' + this.$data) //undefined
console.log('%c%s', 'color:red', 'message: ' + this.message)
},
}
</script>
<style scoped>
</style>
A captura de tela do console, a ordem de impressão é a seguinte:
Em primeiro lugar, beforeCreateantes da criação, a instância do componente atual não foi criada e é usada para criar a tarefa de inicialização de desenvolvimento
Em seguida watch, o monitoramento de dados, o relógio atual definido imediatamente como verdadeiro, o retorno de chamada será chamado imediatamente após o início do monitoramento, o padrão é falso
Após createda conclusão da criação, nosso el, ou seja, o elemento Dom ainda não está disponível neste estado, mas já podemos obter os dados, o que significa que os dados foram carregados, e geralmente é usado para enviar createddados assíncronos aqui pergunte
Antes beforeMountda montagem, o nó DOM não é criado, a renderização e a atualização não são executadas , portanto, ainda não é possível obtê-lo antes
Em seguida, computedcalcule o atributo, que pode ser uma função ou um objeto {
{get,set}}, apenas uma função geral; não pode escrever set, adequado para um valor afetado por vários dados e geralmente retorna o resultado; possui um cache atributo, múltiplas vezes no template O uso in será calculado apenas uma vez;
//Se houver subcomponentes
, então subcomponentes, beforeCreate
depois subcomponentes create
e depois subcomponentes, errorCapturedquando os erros dos subcomponentes são capturados, ele avisa onde há um problema com os subcomponentes, então sub-
componentes, beforeMount
depois subcomponentes e beforeMount
depois subcomponentesactivated
Finalmente, mounteda montagem é concluída e o nó DOM é criado. Normalmente, você pode usar $refspara $elobter o nó DOM , para obter el neste estágio. Podemos usar console.dir para imprimir os atributos de alguns elementos que precisamos.
Então, na fase de atualização, há o seguinte código na página vue
<a-input v-model="message" style="width: 120px"></a-input>
<div>{
{
message }}</div>
<h3 style="color: red">csdn博主：{
{
csdnName }}</h3>
Em seguida, inserimos e alteramos os dados da mensagem na caixa de entrada, a captura de tela é a seguinte
//Se houver um atributo calculado , watch
ele entrará watchno estado de monitoramento de dados, que pode ser uma função ou um objeto {
{handler,immediate,deep}}; a inicialização padrão não será executada a menos que imediato seja definido como verdadeiro; ele é adequado para um valor afetar vários dados, executar Múltiplas operações podem não retornar nenhum resultado; adequado para operações assíncronas ou caras
Sempre que alterarmos os elementos da página, entraremos na fase de atualização, que são os dois estados de beforeUpdate e atualizado.
beforeUpdateé antes da atualização, geralmente usado para obter os vários estados antes da atualização.
updateé depois da atualização, todos os estados estão atualizados
Se houver subcomponentes, insira e saia (desative) a sequência de subcomponentes.
Ao clicar no botão ocultar/exibir subcomponente,
primeiro insira o componente pai, depois insira o subcomponente , depois insira o subcomponente, beforeUpdate
depois insira o subcomponente e, em seguida, insira o pai componentesactivatedbeforeDestroydestroyedactivated
Então, na fase de descarregamento (destruição), há um novo código no pai vue
//在template代码块增加如下按钮
<a-button @click="showtap">点击卸载</a-button>
//在script增加一个方法
methods: {
showtap() {
this.$destroy('home')
},
},
A captura de tela após clicar no botão de desinstalação é a seguinte:
beforeDestroyO estado antes da destruição, elementos e dados podem ser impressos antes da destruição, geralmente usados para temporizadores ou cancelamento de assinatura, etc., e a instância do componente ainda existe neste momento .
//Se houver um subcomponente
, insira o estado antes activated
do subcomponente ser destruído e, em seguida, o subcomponente destruirá o estado concluídobeforeDestroydestroyed
destroyedO status da conclusão da destruição também pode ser impresso, o componente foi destruído e a instância do componente não existe no momento
beforeDestroye destroyed, são os ciclos de vida que só serão chamados quando sairmos deste componente.
4. Resumo
vida útil:
Também conhecida como: função de retorno de chamada do ciclo de vida, função de ciclo de vida, gancho de ciclo de vida.
O que é: algumas funções com nomes especiais que o Vue nos chama em momentos críticos.
O nome da função de ciclo de vida não pode ser alterado, mas o conteúdo específico da função é escrito pelo programador de acordo com os requisitos.
O this na função de ciclo de vida aponta para o objeto de instância vm ou componente.
Ganchos de ciclo de vida comumente usados:montado: enviar solicitações ajax, iniciar cronômetros, vincular eventos personalizados, assinar mensagens, etc. [operações de inicialização].
beforeDestroy: limpar temporizadores, desvincular eventos personalizados, cancelar assinatura de mensagens, etc.
Sobre a destruição da instância Vue
Após a destruição, você não poderá ver nenhuma informação com a ajuda das ferramentas de desenvolvedor Vue.
Os eventos personalizados serão inválidos após a destruição, mas os eventos DOM nativos ainda serão válidos.
Geralmente, os dados não serão manipulados no beforeDestroy, pois mesmo que os dados sejam manipulados, o processo de atualização não será acionado novamente.
Site oficial : https://cn.vuejs.org/api/options-lifecycle.html#beforecreate
