【vue3】组合式函数_vue3组合式函数

本文主要参考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();

1
2
3
4
5
6
7
8
9
10
11
12

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
    
1
2
3
4
5
6
7
8
9
10
11
12
13