setup 组合式 API JS 抽离

为什么要抽离？

首先，js 抽离可以有效解决逻辑代码重复的问题。 在 Vue 2 中，可以利用 mixin 抽象组件逻辑（ 非常好用 ）。但是，他们有几个问题：

1. Mixin 很容易发生冲突 : 因为每个 mixin 的 property 都被合并到同一个组件中，所以为了避免 property 名冲突，你仍然需要了解其他每个特性。

2. 可重用性是有限的 : 我们不能向 mixin 传递任何参数来改变它的逻辑，这降低了它们在抽象逻辑方面的灵活性。

为了解决这些问题，我们添加了一种通过逻辑关注点组织代码的新方法：利用组合式 API语法抽离。

setup 语法抽离

1. 编写抽离 js，如 : /src/components/Say.js

import {ref, inject} from "vue";
// 利用一个函数返回公共属性及函数
export default function sayJS(){
	// whatContent 可以看做为一个属性
	let whatContent = inject('whatContent', '默认说话内容');
	// sayLog 可以看做为一个组件的内置函数
	const sayLog      = ()=>{
		console.log('我是一个函数...');
	}
	// 利用 return 返回属性及行数
	return {
		whatContent, sayLog
	};
}

2. 在组件内使用抽离数据，如 : /src/components/Say.vue

<template>
	<div>说话内容 : {{whatContent}} ...</div>
</template>
<script setup>
import { onMounted } from 'vue'
import sayJS from './Say.js';
// 此处从 Say.js 获取公共的属性和函数
const {whatContent, sayLog} = sayJS();
// 此处演示 动态改变 whatContent 值
onMounted(()=>{
	sayLog();
	setTimeout(()=>{
		whatContent.value = 'holl'
	},2000);
});
// 暴露组件方法及属性
defineExpose({
    whatContent,
    sayLog
})
</script>

3. 调用组件演示，如 : app.vue

<template>
	<say ref="sayCom"></say>
</template>
<script setup>
import { provide, ref, onMounted } from 'vue';
let whatContent = ref('您好');
provide('whatContent',whatContent);
// 组件引用演示
const sayCom = ref(null);
onMounted(()=>{
	console.log(sayCom.value.whatContent+'...');
	sayCom.value.sayLog();
});
</script>