hook的本质就是函数,把setup中的组合式api进行了一个封装,便于复用。
封装和引用有一定的套路。话不多说,上代码。
import {ref,onMounted,onBeforeUnmount} from 'vue'
export default function (){
let count = ref(0)
function clickAdd(){
count.value ++
}
onMounted(() => {
window.addEventListener('click',clickAdd)
})
onBeforeUnmount(() => {
window.removeEventListener('click',clickAdd)
})
return count
}
import useClick from '../hooks/useClick'
export default {
setup () {
let count = useClick()
return {count}
}
}
toRef是vue3提供的组合式api,它的作用是创建一个ref对象,其value值指向的是另一个对象中的某个属性。
我们主要利用它去处理,把响应式的对象解构出来,方便在模板中使用。
toRefs可以批量创建多个ref对象,配合展开运算符特别好用。简化我们在模板中使用对象。
toRef的语法:
const name = toRef(person,'name')
toRefs的使用
// 模板
<div>
姓名:{{name}}
年龄:{{age}}
</div>
// js
import { reactive,toRefs } from 'vue'
export default {
setup () {
const data = reactive({
name:'zhangsan',
age:18
})
return {
...toRefs(data)
}
}
}