Vue前端框架12 组件生命周期、生命周期的应用、动态组件、组件保持存活、异步组件、依赖注入、Vue应用原理

文章目录

• • 一、组件生命周期
  • 二、生命周期的应用
  • 三、动态组件
  • 四、组件保持存活
  • 五、异步组件
  • 六、依赖注入
  • 七、Vue应用

一、组件生命周期

每个Vue组件在创建时需要经历一系列的初始化步骤，比如设置侦听，编译模板，挂载实例到DOM，或者数据改变时更新DOM。
在这个过程中，也会运行生命周期钩子函数，可以让我们在特定阶段运行自己的代码。

<template><h3>组件的生命周期</h3><p>{{message}}</p><button @click="updateMessage">更新数据</button></template><script>/** * 生命周期函数分为四个时期 * 创建期：beforeCreate、created * 挂载期：beforeMount、mounted * 更新期：beforeUpdate、updated * 销毁期：beforeUnmount、unmounted */export default {name: 'App',data(){return{message:"更新之前"}},methods:{updateMessage(){this.message="更新之后"}},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>

二、生命周期的应用

主要俩个应用：
1、通过ref获取元素DOM结构
2、模拟网络请求渲染数据

<template><h3 ref="title">组件的生命周期</h3></template><script>export default {name: 'App',data(){return{message:"更新之前"}},beforeMount(){console.log("组件挂载之前")console.log(this.$refs.title)},mounted(){console.log("组件挂载")console.log(this.$refs.title)}}</script>

三、动态组件

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

四、组件保持存活

在使用上面说的component:is 在多个组件之间切换时，被切换的组件会被卸载
可以通过keep-alive 组件强制被切换掉的组件依然保持存活状态

<template><keep-alive><Component :is="tabComponent"></Component></keep-alive><button @click="changeHandle">切换组件</button></template><script>import ComponentA from "@/components/componentA";import ComponentB from "@/components/ComponentB";export default {name: "ComponentMain",components: {ComponentB, ComponentA},data(){return{tabComponent:ComponentA}},methods:{changeHandle(){this.tabComponent= this.tabComponent=="ComponentA" ? "ComponentB":"ComponentA"}}}</script><style scoped></style>

<template><h3>ComponentA</h3><p>{{message}}</p><button @click="changeHandle">切换数据</button></template><script>export default {data(){return{message:"老数据"}},methods:{changeHandle(){this.message="新数据"}}}</script>

五、异步组件

Vue通过defineAsyncComponent方法来实现此功能

<template><keep-alive><Component :is="tabComponent"></Component></keep-alive><button @click="changeHandle">切换组件</button></template><script>import ComponentA from "@/components/componentA";//实现异步加载组件import {defineAsyncComponent} from "vue";const ComponentB=defineAsyncComponent(()=>import("@/components/ComponentB"))export default {name: "ComponentMain",components: {ComponentB, ComponentA},data(){return{tabComponent:ComponentA}},methods:{changeHandle(){this.tabComponent= this.tabComponent=="ComponentA" ? "ComponentB":"ComponentA"}}}</script><style scoped></style>

六、依赖注入

prop只可以进行逐层透传
provide和inject可以帮助我们解决逐层透传带来的复杂操作

<template><Cpeople2></Cpeople2></template><script>//注意 provide和inject只可以上传下 不可以反向import Cpeople2 from "@/components/Cpeople2";export default {// eslint-disable-next-line vue/multi-word-component-namesname: "Cpeople1",data(){return{message:"爷爷的财产"}},// provide:{// message:"爷爷的财产"// },provide(){return{message:this.message}},components: {Cpeople2}}</script><style scoped></style>

<template><P>{{message}}</P><P>{{fullMessage}}</P></template><script>export default {// eslint-disable-next-line vue/multi-word-component-namesname: "Cpeople3",//通过 inject 获得 祖宗的provideinject:["message"],data(){return{fullMessage:this.message}}}</script><style scoped></style>

也可以从根开始传

import { createApp } from 'vue'import App from './App.vue'const app=createApp(App)//注入全局数据app.provide("gData","全局数据")app.mount('#app')

七、Vue应用

每个Vue应用都是从createApp函数创建的一个新的应用实例

import { createApp } from 'vue'import App from './App.vue'const app=createApp({//根组件选项})//注入全局数据app.provide("gData","全局数据")app.mount('#app')

一般我们都用App.vue作为我们的根组件

只有调用了mount()方法后才可以渲染出来

公共资源存放在src目录下的assets文件夹下

主要的入口就是index,html文件