vue3 自定义hook函数 和 toRef

hook本身是一个函数,把setup 函数中使用的Composlition API进行了封装,也就是代码的复用性更强。

toRef 作用就是创建一个ref对象,其value值指向另一个对象中的某个属性值。 语法: toRef(person,‘name’)

如果有多个的对象,可以直接用 toRefs(‘一个参数’)/ 使用可以用 …toRefs(‘参数’)

vue3 自定义hook函数 和 toRef_第1张图片
代码实例
我们假设及时获取页面鼠标位置即打点。




vue3 自定义hook函数 和 toRef_第2张图片
如果要是有人要用这个组件就要变化,进行封装
vue3 自定义hook函数 和 toRef_第3张图片
然后封装一下
vue3 自定义hook函数 和 toRef_第4张图片
在引入下vue3 自定义hook函数 和 toRef_第5张图片
toRef
vue3 自定义hook函数 和 toRef_第6张图片

你可能感兴趣的:(javascript,vue.js,前端,toref,toRefs)