【Vue3】第六部分 自定义hook和toRef

【Vue3】第六部分 自定义hook和toRef

---

---

6. 自定义hook和toRef

6.1 自定义hook

• 什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。

• 类似于vue2.x中的mixin。

• 自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。

实现一个功能：获取鼠标所点击的坐标

具体代码

scr/hook/updatePoint.js

import {reactive} from "vue"
import {onMounted,onBeforeUnmount} from "vue"
export default function(){
    // 坐标相关数据
    let point = reactive({
        x:0,
        y:0
    })

    //坐标相关方法
    function updatePoint(e){
        point.x = e.pageX
        point.y = e.pageY
        console.log(e.pageX,e.pageY);
    }

    //挂载后
    onMounted(()=>{
        window.addEventListener('click',updatePoint)
    })

    //卸载前
    onBeforeUnmount(()=>{
        window.removeEventListener('click',updatePoint)
    })

    return{point}
  
}

TestDemo组件

<template>
  <div>
    <h1>X:{{p.point.x}}</h1>
    <h1>Y:{{p.point.y}}</h1>
  </div>
</template>

<script>
//导入
import updatePoint from "../hook/updatePoint"
export default {
  name:'TestDemo',
  setup(){ 
    let p = updatePoint()

    return{
      p
    }
  }

}
</script>

<style>

</style>

6.2 toRef和toRefs

6.2.1 toRef

• 作用：本质是创建一个 ref 对象，其value值指向另一个对象中的某个属性(意思是value的值是去访问源数据下的属性，并不是创建一个新的数据源)，如果直接使用ref去包裹数据，则是创建一个新的数据，更新的值也是去修改新的数据源而不是原数据源。

如图所示：不引起源数据的变化，因为它变化的新的值

使用ref

  setup(){
     let person = reactive({
       name:'Tree',
       age:18,
       job:{
         salary:20
       }
     })
  
     return{
       person,
       name:ref(person.name),
       age:ref(person.age),
       salary:ref(person.job.salary)
     }
   }

toRef

setup(){
     let person = reactive({
       name:'Tree',
       age:18,
       job:{
         salary:20
       }
     })
  
     return{
       person,
       name:toRef(person.name),
       age:toRef(person.age),
       salary:toRef(person.job.salary)
     }
   }

• toRef的语法：toRef(person,'name')

• 应用: 要将响应式对象中的某个属性单独提供给外部使用时。

6.2.2 toRefs (常用)

扩展：toRefs与toRef功能一致，但toRefs可以批量创建多个 ref 对象
语法：toRefs(person)

如图所示，会引起源数据的变化

具体代码

<template>
  <div>
    <h1>姓名：{{name}}</h1>
    <h1>年龄：{{age}}</h1>
    <h1>薪资：{{job.salary}}K</h1>
    <button @click="name+='!'">修改名字</button>
    <button @click="age++">修改年龄</button>
    <button @click="job.salary++">修改薪资</button>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
  name:'TestDemo',
  setup(){
    let person = reactive({
      name:'Tree',
      age:18,
      job:{
        salary:20
      }
    })

    let p = toRefs(person)
    console.log(p);
  
    return{
      // toRef
      // name:toRef(person,'name'),
      // age:toRef(person,'age'),
      // salary:toRef(person.job,'salary')

      // toRefs (常用)
      // 返回一个对象，所以想要在对象中写需要使用扩展运算符
      // 将其平铺成一组一组的key-value
      ...toRefs(person)
    }
  }
}
</script>

<style>

</style>其它 Composition API

---

总结

以上就是今天要讲的内容，希望对大家有所帮助！！