文章目录
- 一、组件生命周期
- 二、生命周期的应用
- 三、动态组件
- 四、组件保持存活
- 五、异步组件
- 六、依赖注入
- 七、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文件