自定义 hook 与 toRefs

117 阅读1分钟

1.什么是hook: 本质是一个函数,把setup函数中使用的Composition API 进行封装

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

3.toRef函数和toRefs函数:

1.作用:创建一个ref对象,其value值指向另外一个对象中的某一个属性值
2.语法: const name = toRef(data,"name")
3.应用:要将响应式对象中的某一个属性单独提供外部使用。
4.扩展:toRef与toRers功能一致,但是可以批量创建多个ref对象,语法 toRefs(data)

4.用法示例如下代码:

<template>
  <div>
      <h4>{{ y }}</h4>
      <h4>{{ z }}</h4>
      <h4>{{ sum }}</h4>
  </div>
</template>

<script>
import { reactive, toRefs, } from "vue";
export default {
  name: "App",
  setup() {
    let data = reactive({
      y: "有一个简单的问题",
      z: "你说什么是爱情",
      sum: "我不知道",
    });
    
    let ondel = () => {
      data.y = "爱我别走";
    };
    return {
    //这里提交出去的数据因为是展开批量提交写法使用模板中可以省略data.
      ...toRefs(data),
    };
  },
};
</script>