vue3 自定义hooks

这是我参与11月更文挑战的第22天，活动详情查看：2021最后一次更文挑战

hooks：

什么是hooks？————本质是一个函数，把setup函数中使用的CompositionAPI进行了封装
类似于vue2.x中的mixin
自定义hooks的优势：复用代码，让setup中逻辑更清楚易懂

import { reactive, onMounted, onBeforeUnmount } from 'vue'
setup() {
        let point = reactive({
            x: 0,
            y: 0
        })
        function usePoint(event) {
            point.x = event.x
            point.y = event.y
        }
        onMounted(() => {
            window.addEventListener('click', usePoint)
        })
        onBeforeUnmount(() => {
            window.removeEventListener('click', usePoint)
        })

        return {
            point
        }
 }
复制代码

我们把这部分代码封装到一个js文件中去，如下：

如在根目录下新建hooks文件夹，并在该文件夹下新增usePoint.js文件,将功能性的代码都转移到这个js文件夹内，如下：

至此，我们就完成了一个功能性的hooks的封装，和vue2.x的mixin有点像

toRef/toRefs：

作用：创建一个ref对象，其value值指向另一个对象中的某个属性

扫描二维码关注公众号，回复： 13342518 查看本文章
语法：const name = toRef(person,'name')
应用：要将响应式对象中的某个属性单独提供给外部使用
拓展：toRefs 与 toRef功能一致，但可以批量创建多个ref对象，语法：toRefs(person)

示例：我们先来定义一个reactive的对象：

界面效果如下：

可以看到这个时候，我们在标签中的使用有点繁琐，要写很多遍的person，那我们看看改成如下这样行不行：

改完之后的界面效果和原来的是一样的，但是当我们点击按钮的时候，就会发现，没有响应，这是为什么呢，其实上面的写法就相当于是

return {
    name:'liudan',
    age:18,
    salary:70
}
复制代码

这种写法是不具备响应式的，所以，我们可以用toRef或是toRefs来实现之前的响应式的效果，如下：

toRef写法：

我们打印一下这个name：

可以看到是一个ObjectRefImpl对象，里面有get和set方法，且value值读取的为person对象中的name值，他是响应式的

以上代码也可以简写成：

return {
    name:toRef(person,'name')
    ...
}
复制代码

toRefs

    const x = toRefs(person)
    console.log(x)
复制代码

可以看到toRefs將person中的属性一次性都转换为响应式的数据了，好用又方便，最后的代码可以这样写：

hooks：

toRef/toRefs：

toRef写法：

toRefs

猜你喜欢