11.vue学习笔记(组件生命周期+生命周期应用+动态组件+组件保持存活)

文章目录

- - - 1.组件生命周期
    - 2.生命周期应用
    - - 2.1通过ref获取元素DOM结构
      - 2.2.模拟网络请求渲染数据
    - 3.动态组件
    - - 3.1.A，B两个组件
    - 4.组件保持存活（销毁期）

1.组件生命周期

每个Vue组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到DOM，
以及在数据改变时更新DOM。
在此过程中，它会运行被称为生命周期钩子的函数，让开发者在特定阶段运行自己的代码
有关创建：beforeCreate/created
有关渲染：beforeMount/mounted
有关更新：beforeUpdate/updated
有关卸载：beforeUnmount/unmounted
作用：在特定时期运行自己的代码

在这里插入图片描述

<template><h3>组件的生命周期</h3><button @click="updateHandle">更新事件</button><p>{{ msg }}</p>
</template>
<script>
export default{data(){return{msg:"更新之前"}},methods:{updateHandle(){this.msg = "更新之后"}},/** * 生命周期函数：*    创建期：beforeCreate(组件即将创建)/created(组件已经创建完成，但还没显示)*    挂载期：beforeMount(准备渲染)/mounted(组建渲染完成：页面可以看到)*    更新期：beforeUpdate(更新前)/updated(更新后)*    销毁期：beforeUnmount(组件销毁前)/unmounted(组件销毁后)*/beforeCreate(){console.log("组件创建之前");},created(){console.log("组件创建之后");},beforeMount(){console.log("组件渲染之前");},mounted(){console.log("组件渲染之后");},beforeUpdate(){console.log("组件更新之前");},updated(){console.log("组件更新之后");},beforeUnmount(){console.log("组件销毁之前");},unmounted(){console.log("组件销毁之后");}}
</script>

2.生命周期应用

常见应用场景：通过ref获取元素DOM结构模拟网络请求渲染数据

2.1通过ref获取元素DOM结构

在这里插入图片描述

2.2.模拟网络请求渲染数据

在这里插入图片描述

3.动态组件

有些场景会需要在两个组件间来回切换，比如Tab界面

3.1.A，B两个组件

在这里插入图片描述

<template><component :is="tabComponent"></component><button @click="changeHandle">切换组件</button>
</template>
<script>
import ComponentA from './components/ComponentA.vue';
import ComponentB from './components/ComponentB.vue';export default{data(){return{tabComponent: "ComponentA"}}, components:{ComponentA,ComponentB},methods:{changeHandle(){this.tabComponent = this.tabComponent == "ComponentA" ? "ComponentB":"ComponentA"}}
}</script>

4.组件保持存活（销毁期）

当使用<component :is="……"></component>来在多个组件间作切换时，被切换掉的组件会被卸载.

在这里插入图片描述

我们可以通过使用<keep-alive>组件强制被切换掉的组件仍然保持存活状态

在这里插入图片描述

<template><keep-alive><component :is="tabComponent"></component></keep-alive><button @click="changeHandle">切换组件</button>
</template>
<script>
import ComponentA from './components/ComponentA.vue';
import ComponentB from './components/ComponentB.vue';export default{data(){return{tabComponent: "ComponentA"}}, components:{ComponentA,ComponentB},methods:{changeHandle(){this.tabComponent = this.tabComponent == "ComponentA" ? "ComponentB":"ComponentA"}}
}</script>
_____________________________________________________________________________________________
<template><h3>ComponentA</h3><p>{{ message }}</p><button @click="updateHanele">更新数据</button>
</template>
<script>
export default{data(){return{message: "老数据"}},beforeUnmount(){console.log("组件卸载之前");},unmounted(){console.log("组件卸载之后");},methods:{updateHanele(){this.message = "新数据"}}
}
</script>
_____________________________________________________________________________________________
<template><h3>ComponentB</h3>
</template>