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>