Vue中的组合API详解

一、组合API是什么？

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

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

二、组合式 API 基础

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);

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；
         };
					
    }
})

7.setup生命周期

组合式 API 上的生命周期钩子与选项式 API 的名称相同，但前缀为 on：即 mounted 看起来会像 onMounted。

Vue2.x	Vue3.0
beforeCreate	setup(不需要)
created	setup(不需要)
beforeMount(挂载前)	onBeforeMount
mounted(挂载后)	onMounted
beforeUpdate(数据更新前)	onBeforeUpdate
updated(数据更新后)	onUpdated
beforeDestroy(销毁前)	onBeforeUnmount
destroyed(销毁后)	onUnmounted

三、自定义组合API

这里我们自定义了翻转文本顺序和获取窗口宽高的方法

import{ref, reactive, onMounted} from 'vue'
function reverseText(){
    const reverseRef = ref(nul);
    onMounted(() => {
    	// reverseRef.value 就是引用的 DOM
        reverseRef.value.onclick = function(){
		    // 获取 DOM 的文本
        	var msg = reverseRef.value.innerText;
            // 翻转文本
            msg = msg.split('').reverse().join('');
            // 赋值给DOM 
            reverseRef.value.innerText = msg;
        }
    })
   	// 返回 DOM 引用对象
    return reverseRef;
}
function uewinSize(){
    // 定义默认的宽高
    const size = reactive({w:window.innerWidth, h:window.innerHeight});
    onMounted(() => {
        // 当窗口发生变化时更新宽高
        window.addEventListener("resize", function(){
            size.w = window.innerWidth;
            size.h = window.innerHeight;
        })
    })
    // 返回size
    return size;
}
export {reverseText, userwinSize};

<template>
	<div class="about">
        <h1 ref="elem">自定义组合API页面</h1>
        <h1 ref="el">学习VUE3</h1>
        <p>w:{{size.w}}, h:{{size.h}}</p>
    </div>
</template>
<script>
	// 导入reverseText
    import {reverseText, userwinSize} from './utils.js'
    export default{
        // 引用一个组件，单击哪个，文本翻转
        setup(props, ctx){
            const elem = reverseText();
            const el = reverseText();
            const size = usewinSize();
            return {elem, el, size};
        }
    }
</script>