Vue3 组合式 API(Composition API) 主要用于在大型组件中提高代码逻辑的可复用性。
传统的组件随着业务复杂度越来越高,代码量会不断的加大,整个代码逻辑都不易阅读和理解。
Vue3 使用组合式 API 的地方为 setup。
在 setup 中,我们可以按逻辑关注点对部分代码进行分组,然后提取逻辑片段并与其他组件共享代码。因此,组合式 API(Composition API) 允许我们编写更有条理的代码。
对比以下两端代码:
1、传统组件
2、组合式 API
setup 组件
setup() 函数在组件创建 created() 之前执行。
setup() 函数接收两个参数 props 和 context。
第一个参数 props,它是响应式的,当传入新的 prop 时,它将被更新。
第二个参数 context 是一个普通的 JavaScript 对象,它是一个上下文对象,暴露了其它可能在 setup 中有用的值。
以下实例使用组合 API 定义一个计数器:
<template> <div> <p>计数器实例: {{ count }}</p> <input @click="myFn" type="button" value="点我加 1"> </div> </template> <script> import {ref, onMounted} from 'vue'; export default { setup(){ //定义初始值为0的变量,要使用ref方法赋值,直接赋值的话变量改变不会更新 UI let count = ref(0); // 定义点击事件 myFn function myFn(){ console.log(count); count.value += 1; } // 组件被挂载时,我们用 onMounted 钩子记录一些消息 onMounted(() => console.log('component mounted!')); // 外部使用组合API中定义的变量或方法,在模板中可用。 return {count,myFn} // 返回的函数与方法的行为相同 } } </script>
在 Vue 3.0 中,我们可以通过一个新的 ref 函数使任何响应式变量在任何地方起作用,如下所示:
import { ref } from 'vue' let count = ref(0);
ref() 函数可以根据给定的值来创建一个响应式的数据对象,返回值是一个对象,且只包含一个 .value 属性。
在 setup() 函数内,由 ref() 创建的响应式数据返回的是对象,所以需要用 .value 来访问。
import { ref } from 'vue' const counter = ref(0) console.log(counter) // { value: 0 } console.log(counter.value) // 0 counter.value++ console.log(counter.value) // 1