vue3 自定义hook函数 和 toRef
hook本身是一个函数，把setup 函数中使用的Composlition API进行了封装，也就是代码的复用性更强。
toRef 作用就是创建一个ref对象，其value值指向另一个对象中的某个属性值。 语法： toRef(person,‘name’)
如果有多个的对象，可以直接用 toRefs(‘一个参数’)/ 使用可以用 …toRefs(‘参数’)
代码实例
我们假设及时获取页面鼠标位置即打点。
<template>
<div class="hello">
<h2>当前求和： {{ sum }}</h2>
<button @click="sum++">加1</button>
<hr />
<h2>当前坐标x: {{ point.x }}， y:{{ point.y }}</h2>
</div>
</template>
<script>
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
export default {
name: "HelloWorld",
props: {
msg: String,
},
setup() {
let sum = ref(0);
let point = reactive({
x: 0,
y: 0,
});
function savePoint(event) {
point.x = event.pageX;
point.y = event.pageY;
console.log(event.pageX, event.pageY);
}
onMounted(() => {
window.addEventListener("click", savePoint);
});
onBeforeUnmount(() => {
window.removeEventListener("click", savePoint);
});
return {
sum,
point,
};
},
};
</script>
如果要是有人要用这个组件就要变化，进行封装
然后封装一下
在引入下
toRef
