Vue3必会——组合API ～三分钟带你了解组合API的魅力

秃头老石

已于 2022-03-17 14:29:46 修改

阅读量7.4k

点赞数 9

分类专栏： Vue3 文章标签： javascript vue.js 前端

于 2022-03-16 23:32:38 首次发布

本文链接：https://blog.csdn.net/sobject/article/details/123538739

版权

Vue3 专栏收录该内容

8 篇文章 3 订阅

订阅专栏

文章目录

前言
一、组合API是什么？
二、组合式 API 基础
三、自定义组合API
总结

前言

例如：在阅读之前，你应该已经熟悉了这两个“ Vue 基础”和“创建组件”。

提示：以下是本篇文章正文内容，下面案例可供参考

一、组合API是什么？

通过创建 Vue 组件，我们可以将界面中重复的部分连同其功能一起提取为可重用的代码段。

组合api
提供复用性
降低耦合性
增加可读性

下面我们来看下在vue2.0中的一个场景：在2.0里面的**export
default{}**通常是由components、props、data()、computed、watch、methods、mounted、created()等这些成员组成。我们都知道一些数据属性一般都会写在data()中，而一些方法通常定义在methods中，然后再在这些方法中通过this来使用data()中的数据属性。如果一个组件代码量比较少还没什么问题，但是一旦遇到一个大型组件，光js代码就成千上万行，想想如果我们想看看data中的属性都在哪些方法中用到了，这时麻烦就来了，我们不得不上上下下来来回回拖动滚动条来查看，尤其是对于那些没有编写过这些组件的人来说，会更加导致对组件的难以阅读和理解。以下是vue官方大大给出的一个大型组件的示例图，其中不同色块代表的就是不同的逻辑关注点：

在这里插入图片描述

这是一个大型组件的示例，其中逻辑关注点按颜色进行分组。
这种碎片化使得理解和维护复杂组件变得困难。选项的分离掩盖了潜在的逻辑问题。此外，在处理单个逻辑关注点时，我们必须不断地“跳转”相关代码的选项块。
如果能够将同一个逻辑关注点相关代码收集在一起会更好。而这正是组合式 API 使我们能够做到的。

二、组合式 API 基础

既然我们知道了为什么，我们就可以知道怎么做。为了开始使用组合式 API，我们首先需要一个可以实际使用它的地方,为了能够让我们更方便的使用组合式API，vue3.0为我们提供了一个新的组件选项：setup

1.setup 组件

setup是一个接收2个参数的函数props和context

props：props是setup的第一个参数，该参数是响应式的，因此不能用 ES6进行解构，因为会消除它的响应式
context：context是setup的第二个参数，context是JavaScript中的一个普通对象，它不是响应式的可以放心的使用ES6结构。context对外暴露了一些可能会用到的值，比如：attrs、slots、emit、expose等
setup函数中不能使用this，因为这里this并不会找到vue的实例

代码如下（示例）：

import { ref } from 'vue'

export default{
	components:{},
	props:{title},
	setup(props,context){
		let message = ref('hello world')//定义一个响应式的变量
		const getTitle = ()=>{ console.log('title')}//定义一个普通函数
		onMounted(getTitle);//调用生命周期函数
		//所有需要给模板或其它钩子函数使用的都需要在这里暴露出去
		return {
			message,
			getTitle
		}
	}
}

2.带 ref 的响应式变量

在 Vue 3.0 中，我们可以通过一个新的 ref 函数使任何响应式变量在任何地方起作用，如下所示

代码如下（示例）：

import { ref } from 'vue'

// 定义响应式数据 count 默认值是10
const count = ref(10);

ref 接收参数并将其包裹在一个带有 value property 的对象中返回，然后可以使用该 property 访问或更改响应式变量的值：

import { ref } from 'vue'

const counter = ref(0)
const addCount = function(n) {
				// 把count的值加上n
				count.value += n;
			}

3.reactive方法

返回对象的响应式副本
响应式转换是“深层”的——它影响所有嵌套 property。

有了这个reactive的方法后，我们就可以想定义多少就定义多少了，而且访问和修改也不需要通过点value的形式了


const book = reactive({
  author: '秃头老石',
  year: '2022',
  price: 'free'
})

4.watch监听

监听对象的变化

import { watch } from 'vue'
watch(count, (nval, oval) => {
				if (nval > 50) {
					console.log(oval);
					Notify({
						type: 'success',
						message: '大于50！'
					});
				}
			})

5.watchEffect

立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。

const stop = watchEffect(()=>{
    // 这个回调函数引用的值，都会被监听
    console.log(num.value,list[0]);
    localStorage.setItem("num",num.value);
})

6.computed 属性

与 ref 和 watch 类似，也可以使用从 Vue 导入的 computed 函数在 Vue 组件外部创建计算属性

接受一个 getter 函数，并根据 getter 的返回值返回一个不可变的响应式 ref 对象

const counter = ref(0)
const twiceTheCounter = computed(() => counter.value * 2)

或者，接受一个具有 get 和 set 函数的对象，用来创建可写的 ref 对象。

const counter = computed({
     // 当获取counter值调用函数
     get(){return num.value},
     // 设置counter值调用函数
     set(v){
         num.value = v;
         if(v>10){
         num.value = 20；
         };
					
    }
})