Web前端开发篇（4）---vue3的props&生命周期&自定义Hooks

1 props的使用

父组件发送list数据，如果不加：，表示传过去一个personList文本：

<template>
  <Home :list="personList"/>
</template>

<script setup lang="ts">
  import Home from "./components/Home.vue"
  import {type Persons} from "@/types";
  import {reactive} from "vue";

  let personList = reactive<Persons>([
    {id:"qwer1234", name:"张三", age:45},
    {id:"qwer1234", name:"张三", age:45},
    {id:"qwer1234", name:"张三", age:45}
  ])
</script>

子组件接收的几种方式：

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">{{item.name}}---{{item.age}}</li>
    </ul>
  </div>
</template>

<script setup lang="ts">
  import {type Persons} from "@/types";

  // 接收的同时，限制类型
  // defineProps<{list:Persons}>()

  // 接收的同时，限制类型，限制必要性，指定默认参数
  withDefaults(defineProps<{list?:Persons}>(),{
    list:()=> [{id:"asdf3456", name: "亚托克斯", age: 9999}]
  })

  // 还可以用一个变量保存
  // let x = withDefaults(defineProps<{list?:Persons}>(),{
  //   list:()=> [{id:"asdf3456", name: "亚托克斯", age: 9999}]
  // })
</script>

2 组件的生命周期

• 创建（创建前，创建完毕）（一次）
• 挂载（挂载前，挂载完毕）（一次）
• 更新（更新前，更新完毕）
• 卸载（卸载前，卸载完毕）（一次）（vue2叫做销毁）

每个组件都有生命周期，如果有父子组件，则子组件先挂载，父组件后挂载。创建函数即为setup函数：

<template>
  <div>
    <h2>Home</h2>
    <p>Number：{{sum}}</p>
    <button @click="add">增加</button>
  </div>
</template>

<script setup lang="ts">
  import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from "vue";
  // 数据
  let sum = ref(0)
  // 方法
  function add(){
    sum.value += 1
  }

  // 创建
  console.log("创建")
  // 挂载前
  onBeforeMount(()=>{
    console.log("挂载前")
  })
  // 挂载完毕
  onMounted(()=>{
    console.log("挂载完毕")
  })
  // 更新前
  onBeforeUpdate(()=>{
    console.log("更新前")
  })
  // 更新完毕
  onUpdated(()=>{
    console.log("更新完毕")
  })
  // 卸载前
  onBeforeUnmount(()=>{
    console.log("卸载前")
  })
  // 卸载完毕
  onUnmounted(()=>{
    console.log("卸载完毕")
  })
</script>

3 自定义Hooks

用一个示例演示hooks的作用，先正常编写代码，包含一个增加数字的功能和一个增加狗的图片的功能。

components/Home.vue： 

<template>
  <div>
    <h2>Home</h2>
    <p>Number：{{sum}}</p>
    <button @click="add">增加</button>
    <br>
    <br>
    <img v-for="(girl,index) in girlList" :src="girl" :key="index">
    <br>
    <button @click="addDogs">再来一条狗</button>
  </div>
</template>

<script setup lang="ts">
  import {ref,reactive} from "vue";
  import axios from 'axios'

  // 数据
  let sum = ref(0)
  let girlList = reactive([
      'https://images.dog.ceo/breeds/pembroke/n02113023_4024.jpg'
  ])

  // 方法
  function add(){
    sum.value += 1
  }
  async function addDogs(){
    try {
      let result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
      console.log(result.data.message)
      girlList.push(result.data.message)
    }catch (error){
      alert(error)
    }
  }
</script>

<style scoped>
  img{
    height: 200px;
    margin-right: 10px;
  }
</style>

上述编写代码方式，导致所有的数据和方法混杂在一起，开发后期很难扩展和维护。所以使用hooks优化代码，将对应的函数和方法封装到一个ts文件中：

hooks/useSum.ts：

import {ref} from "vue";

export default function (){
    // 数据
    let sum = ref(0)

    // 方法
    function add(){
        sum.value += 1
    }
    // 向外部提供
    return {sum,add}
}

hooks/useDog.ts：

import {reactive} from "vue";
import axios from 'axios'

export default function () {

    // 数据
    let girlList = reactive([
      'https://images.dog.ceo/breeds/pembroke/n02113023_4024.jpg'
    ])

    // 方法
    async function addDogs(){
        try {
            let result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
            console.log(result.data.message)
            girlList.push(result.data.message)
        }catch (error){
            alert(error)
        }
    }
    // 向外部提供
    return {girlList, addDogs}
}

components/Home.vue：

<template>
  <div>
    <h2>Home</h2>
    <p>Number：{{sum}}</p>
    <button @click="add">增加</button>
    <br>
    <br>
    <img v-for="(girl,index) in girlList" :src="girl" :key="index">
    <br>
    <button @click="addDogs">再来一条狗</button>
  </div>
</template>

<script setup lang="ts">
  import useDog from "@/hooks/useDog";
  import useSum from "@/hooks/useSum";

  const {sum,add} = useSum()
  const {girlList,addDogs} = useDog()
</script>

<style scoped>
  img{
    height: 200px;
    margin-right: 10px;
  }

</style>