vue生命周期及组件讲解（如何导入引用外部vue文件，以及注册全局变量，自定义标签效果）

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

函数	说明
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>