这是我参与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值指向另一个对象中的某个属性
-
语法: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中的属性一次性都转换为响应式的数据了,好用又方便,最后的代码可以这样写: