Vue 组合式函数简介

Vue 组合式函数：export导出一个函数。函数内可以定义生命周期勾子、数据及方法，它是可复用的模块。类似Mixin 混入。但比Mixin更有优势。

组合式函数示例：

useDemo.js 

import {
    ref,
    onMounted
} from 'vue'

export function abc() {
    // 数据
    const nums = ref(0)

    // 方法
    function add(x, y){
        console.log(nums.value);
        return x + y
    }

    // 生命周期
    onMounted(() => {
        console.log('生命周期');
    })

    // 暴露数据、方法
    return {add, nums}
}

 

调用方法：

<script setup>
   import {abc} from '@/common/js/useDemo.js'
    
    // 解勾，这里已经将生命周期勾子绑定到当前页面
    const {add, nums} = abc()

    // 获取数据
    nums.value++

    // 执行接口函数
    add(3,nums.value)
</script>

 

总结：

1、约定：所有组合式函数约定以 use 开头。

2、组合式函数内，可定义生命周期，其定义的生命周期会在被引入的页面中执行。

3、通常在获取组合式函数接口时，采用解勾方法，比如：const {add, nums} = abc()

4、项目开发中，如果有无渲染组件，推荐使用组合式函数来完成。