本文主要参考vue.js官网和掘金中这篇文章https://juejin.cn/post/7066951709678895141;
vue3中提出了关于组合式函数的方法,与react中的hooks相同功能,
- hooks:系统运行到某一时期,会调用注册到该时机的回调函数
比较常见的钩子有:windows 系统的钩子能监听到系统的各种事件,浏览器提供的 onload 或 addEventListener 能注册在浏览器各种时机被调用的方法
为什么引入?实现更好的状态复用(mixin)
-一系列以 “use” 作为开头的方法,它们提供了让你可以完全避开 class式写法,在函数式组件中完成生命周期、状态管理、逻辑复用等几乎全部组件开发工作的能力。
组合式函数的优点
- 方法和属性好追溯吗?这可太好了,谁产生的,哪儿来的一目了然。
- 会有重名、覆盖问题吗?完全没有!内部的变量在闭包内,返回的变量支持定义别名。
- 多次使用,没开N度?你看上面的代码块内不就“梅开三度” 了吗?
// 单个name的写法
const {
name, setName } = useName();
// 梅开二度的写法
const {
name : firstName, setName : setFirstName } = useName();
const {
name : secondName, setName : setSecondName } = useName();
vue组合式函数 VS react的hook
- 相似点: 总体思路是一致的 都遵照着 “定义状态数据”,“操作状态数据”,“隐藏细节” 作为核心思路。
- vue3 的组件里, setup 是作为一个早于 “created” 的生命周期存在的,无论如何,在一个组件的渲染过程中只会进入一次。
- React函数组件 则完全不同,如果没有被 memorized,它们可能会被不停地触发,不停地进入并执行方法,因此需要开销的心智相比于vue其实是更多的。
跟着官网学习
需要复用公共任务的逻辑,例如跟踪当前鼠标在页面中的位置,这些状态逻辑负责管理会随时间而变化的状态。
组合式API
直接在组件中使用组合式API实现鼠标跟踪功能,如下所示
<script >
import {
ref, onMounted, onUnmounted} from 'vue'
setup(){
const x = ref(0);
const y = ref(0);
function update(event){
x.value = event.pageX
y.value = event.pageY
}
onMounted(() => window.addEventListener('mousemove',update)