组件的生命周期
1.创建期 beforeCreate created
2.挂载期 beforeMounte mounted
3.更新期 beforeUpdate updated
4.销毁期 beforeUnmount unmounted
<template>
<p>组件的生命周期</p>
<div>{{ message }}</div>
<button @click="updatedata">更新数据</button>
</template>
<!--1.创建期 beforeCreate created
2.挂载期 beforeMounte mounted
3.更新期 beforeUpdate updated
4.销毁期 beforeUnmount unmounted
-->
<script>
export default {
name: "mounted_life",
data() {
return {
message: "数据更新之前"
}
},
methods: {
updatedata() {
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>
<style scoped>
</style>
我们可以在代码上清楚地知道他的组件执行流程
二.动态组件
<template>
<component :is="tabcomponent"></component>
<button @click="change_component">点击切换组件</button>
</template>
<script>
import ComponentA from "@/components/ComponentA.vue";
import ComponentB from "@/components/ComponentB.vue";
export default {
name: "change_component",
data() {
return {
tabcomponent: "ComponentA"
}
},
components: {
ComponentA,
ComponentB
},
methods: {
change_component() {
this.tabcomponent = this.tabcomponent == "ComponentA" ? "ComponentB" : "ComponentA";
}
}
}
</script>
<style scoped>
</style>
我们导入两个组件，然后通过按钮事件和component标签这样让组件进行切换
三.组件保持存活
我们在切换组件的时候会导致组件被卸载删除，那么我们重新加载回来的时候，就会很浪费资源，所以我们希望能够让在切换的时候还存活，你可以理解为手机后台，打游戏不用重新加载，我们在vue中可以使用keep-alive标签
<template>
<keep-alive>
<component :is="tabcomponent"></component>
</keep-alive>
<button @click="change_component">点击切换组件</button>
</template>
<script>
import ComponentA from "@/components/ComponentA.vue";
import ComponentB from "@/components/ComponentB.vue";
export default {
name: "change_component",
data() {
return {
tabcomponent: "ComponentA"
}
},
components: {
ComponentA,
ComponentB
},
methods: {
change_component() {
this.tabcomponent = this.tabcomponent == "ComponentA" ? "ComponentB" : "ComponentA";
}
}
}
</script>
<style scoped>
</style>
四.异步组件加载
什么是异步组件加载，就是我在运行项目或者需要用到组件的时候，是用到组件的时候才会加载组件，而不是启动项目的时候就全部组件一起加载，这样在组件数量多的时候会大大增加我们的性能
<template>
<keep-alive>
<component :is="tabcomponent"></component>
</keep-alive>
<button @click="change_component">点击切换组件</button>
</template>
<script>
import ComponentA from "@/components/ComponentA.vue";
import {defineAsyncComponent} from "vue";
// 异步加载组件
const ComponentB=defineAsyncComponent(()=>
import("@/components/ComponentB.vue"))
export default {
name: "change_component",
data() {
return {
tabcomponent: "ComponentA"
}
},
components: {
ComponentA,
ComponentB
},
methods: {
change_component() {
this.tabcomponent = this.tabcomponent == "ComponentA" ? "ComponentB" : "ComponentA";
}
}
}
</script>
<style scoped>
</style>
我们在代码中用关键词defineAsyncComponent来实现，用法就是这样
const ComponentB=defineAsyncComponent(()=> import("@/components/ComponentB.vue"))
这样可以让我们的效率更高
五.依赖注入
Vue 3 引入了基于函数式的依赖注入系统，以提供更灵活的组件通信方式。在 Vue 3 中，你可以使用 provide 和 inject 来实现依赖注入。
provide：用于在父组件中提供数据，可以是一个值或一个函数，允许子组件通过inject访问这些数据。inject：用于在子组件中接收父组件通过provide提供的数据
<template>
<div>
<p>Parent Component</p>
<ChildComponent />
</div>
</template>
<script>
import { ref, provide } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
setup() {
const message = ref('Hello from parent!');
// 使用 provide 提供数据给子组件
provide('message', message);
return {
message,
};
},
};
</script>
<template>
<div>
<p>Child Component</p>
<p>{{ injectedMessage }}</p>
</div>
</template>
<script>
import { inject } from 'vue';
export default {
setup() {
// 使用 inject 获取父组件提供的数据
const injectedMessage = inject('message', '默认值');
return {
injectedMessage,
};
},
};
</script>
在这个例子中，ParentComponent 使用 provide 提供了一个名为 message 的数据给其子组件 ChildComponent，而 ChildComponent 则使用 inject 获取了这个数据。这样，父子组件之间实现了简单的依赖注入
