生命周期钩子的理解与应用
| 函数 | 说明 |
|---|---|
| onBeforeMount( ) | 组件挂载前 |
| onMounted( ) | 组件挂载后 |
| onBeforeUpdate( ) | 组件更新前 |
| onUpdated( ) | 组件中任意的DOM元素更新后 |
| onBeforeUnmount( ) | 组件实例被销毁前 |
| onUnmounted( ) | 组件实例被销毁后 |
-
生命周期在 各类应用以及网站中使用非常广泛，就如某音乐，需要vip才能听完整的歌曲，若是普通用户只能免费试听30秒，底层的逻辑思想和生命周期钩子一样，当用户在登录时，先会执行挂载前，当登录成功后，就到了挂载后，开始渲染页面，此时用户看到网页主页面效果，当用户购买vip时，先会执行更新数据前，当购买成功后，就会执行更新数据后的代码，通过判断用户身份，解锁付费歌曲的播放权限。当用户想要注销账号时，就会先调用更新数据前，准备删除，准备完成后，执行销毁前的代码，一般是提示你确定要删除或注销账号吗,当点击确定，则执行了被销毁后的代码段，此时账号被注销，无法再登录。
代码演示如下：
在APP.vue中
<template>
<div>
<HelloWorld v-if="type"></HelloWorld>
<br>
<button @click="xiaohui">销毁</button>
</div>
<HelloWorld msg="Vue课程" />
</template>
<script setup>
import {ref} from "vue"
import HelloWorld from './components/live.vue'
const type = ref(true)
const xiaohui = () =>{
type.value = false
}
</script>
<style>
</style>
- 在live.vue文件中
<template>
<div class="container">
<h1>这是生命周期</h1>
</div>
<hr>
<button @click="count++">更新数值</button>
<div id="id1">count value is {{ count }}</div>
<hr>
<hr>
<button @click="count2++">更新数值</button>
<div id="id2">count value is {{ count2 }}</div>
<hr>
<div v-if="flag" >
</div>
<button @click="flag= !flag">控制显示</button>
</template>
<script setup>
import {
onBeforeMount,
// 挂载
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
// 渲染
onUnmounted
} from 'vue';
import { ref } from 'vue';
const count = ref(0)
const count2 = ref(0)
const flag=ref(true)
onBeforeMount(
()=> {
// 回调函数,先出现,反引号
alert(`在挂载前${document.querySelector(".container")}`)
}
)
onMounted(
() => {
// 回调函数，后出现，渲染--innerHTML,查询
alert(`在挂载前${document.querySelector(".container").innerHTML}`)
}
)
onBeforeUpdate(
() => {
alert(`在更新前${document.querySelector("#id1").innerHTML}`)
}
)
onUpdated(
() => {
alert(`在更新后${document.querySelector("#id1").innerHTML}`)
}
)
onBeforeUnmount(
() => {
alert(`准备销毁`)
}
)
onUnmounted(
() => {
alert(`销毁成功`)
}
)
</script>
<style>
</style>
自定义组件及父类的数据传递，子类的数据接收
从外部应用其他vue组件内容
-
作用：可以让编辑代码的页面看起来更简洁，且方便后期对各个板块的代码进行维修，升级。
-
代码如下
App.vue文件
<script setup>
import HelloWorld from './components/p.vue'
</script>
<template>
<HelloWorld msg="Vite + Vue" />
</template>
<style scoped>
</style>
p.vue文件
<template>
<h1> 这是组件p</h1>
<p2></p2>
<p3></p3>
</template>
<script setup>
import p2 from './p2.vue'
import p3 from './p3.vue'
</script>
<style>
/* scoped是范围的意思，如果在父组件里添加，则父组件的样式会覆盖子组件的样式 */
h1{
color: red;
}
</style>
p2.vue文件
<template>
<h1> this is p2</h1>
</template>
<script setup>
</script>
<style scoped>
/* scoped是范围的意思，如果不加会被父组件的样式给覆盖掉 */
h1{
color: purple;
}
</style>
p3.vue文件
<template>
<h1> これは p3</h1>
</template>
<script setup>
</script>
<style scoped>
h1{
color: aqua;
}
</style>
- 效果如下
定义全局变量，从而在用时直接引用标签
- main.js是用来控制整个项目的核心，在这个文件里，可以先引用（导入）需要的vue文件，并通过设置全局变量，自定义标签后，在项目任意一个vue文件中无需再次引用（导入）外部vue文件，直接应用自定义的标签，就可以获得对应的效果
main.js文件
// 设置为全局引用，这样不用导入就可以直接使用标签来实现效果
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 1.先引用过来
import p2 from './components/p2.vue'
import p3 from './components/p3.vue'
const app = createApp(App);
// 2.全局注册
app.component('p2', p2)
app.component('p3', p3)
app.mount('#app')
在注册完全局变量后，之前的p.vue文件中引用外部vue文件的代码就可以省略了
p.vue文件
<template>
<h1> 这是组件p</h1>
<p2></p2>
<p3></p3>
</template>
<script setup>
// 这2行引用外部vue文件就可以去掉了
// import p2 from './p2.vue'
// import p3 from './p3.vue'
</script>
<style>
/* scoped是范围的意思，如果在父组件里添加，则父组件的样式会覆盖子组件的样式 */
h1{
color: red;
}
</style>
网页效果不变！！！
数据在不同vue文件之间的传递
-
数据在不同vue文件之间传递是经常使用的，例如在选购完商品后，跳转到新的支付页面，购物页面的商品价格的数据，就要传递到支付页面，然后完成支付购买。
-
为演示数据传递过程，我创建了以下结构的文件夹
其中主要是将Parent.vue的数据传输给Child.vue文件中，因此我在Parent.vue中定义数据（定义变量），在Child.vue文件中定义数据接收器defineProps( )，为了验证Child.vue成功接收数据，我在Parent.vue中通过标签调用defineProps( )中的数据。详细代码如下：
Parent.vue文件
<template>
<h2>这个是Parent</h2>
<!-- 只有通过动态绑定才能添加数字类型的数据 -->
<!-- 把信息传递到子组件中 -->
<Child :msg="msg" :num="num" :count="count"></Child>
</template>
<script setup>
import Child from './Child.vue'
import {ref} from 'vue';
// 定义父组件的信息
const msg = ref("hello world from parent")
const num = ref(100)
const count = ref(1)
</script>
<style scoped>
</style>
Child.vue文件
<template>
<h1>hello world</h1>
<p>{{ msg }}</p>
<p>{{ num }}</p>
<p>个数是：{{ count }}</p>
</template>
<script setup>
// 用于接收外部父组件传递的信息，在父组件中的标签头使用
const props = defineProps(
{
msg: String,
num: Number,
count: Number
}
)
</script>
<style scoped>
</style>
要想动态的改变数据，就需要Parent.vue文件中继续做一些操作啦，例如我添加并绑定了一个按钮，当我点击改变按钮时，数据就会被替换。
修改后的Parent.vue文件：
<template>
<h2>这个是Parent</h2>
<!-- 只有通过动态绑定才能添加数字类型的数据 -->
<!-- 把信息传递到子组件中 -->
<Child :msg="msg" :num="num" :count="count"></Child>
<button @click="change"> 改变</button>
</template>
<script setup>
import Child from './Child.vue'
import {ref} from 'vue';
// 定义父组件的信息
const msg = ref("hello world from parent")
const num = ref(100)
const count = ref(1)
const change = () =>{
msg.value = '改变后的数据'
num.value = 999
count.value = 2
}
</script>
<style scoped>
</style>
