生命周期钩子的理解与应用

函数	说明
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 = 999count.value = 2
}
</script>
<style scoped>
</style>