一、组件生命周期
每个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-names
name: "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-names
name: "Cpeople3",
// 通过 inject 获得 祖宗的provide
inject:["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文件
