Vue3模块化指的是，把HTML和逻辑代码分离，对一个页面有多个复杂的功能时，可以一个功能对应一个文件，提高可读性，复用性，维护性，并且在遇到相同功能展示不同的UI时，可以直接集成某一个功能进行实现。
下面一个小案列：
实列：下面页面实现了两个功能，一个是数字加减，一个是数组添加和删除
1.Home页面
<template>
<div class="home">
<br/>
数字：{{sum}}
<button type="button" @click="add">加</button>
<button type="button" @click="reduce">减</button>
<p>
输入追加的数字：<input type="" name="" id="" v-model="value" /><button type="button" @click="pushEvent">追加数组</button>
<button type="button" @click="deleteEvent">删除最后一项</button>
</p>
<div>
<p v-for="(item,index) in arr" :key="index">
{{item}}
</p>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
// 抽离的逻辑代码进行导出Home.ts文件内容
import {sum, add,parameter,reduce,pushEvent,deleteEvent} from '@/hook/Home.ts'
import { toRefs } from 'vue';
export default defineComponent({
name: 'Home',
components: {
},
setup(){
return {
add,reduce,
pushEvent,
deleteEvent,
sum,
...toRefs(parameter)
}
}
});
</script>
2.创建的src/hook/Home.ts（实现数据的逻辑代码）
import { ref,reactive,toRefs } from 'vue';
// 1.数组循环 并且添加/删除// arr 数据接口 定义arr常量数组内必须全部是数字
interface arr {
arr:Array<number>,
value:number
}
const parameter = reactive<arr>({
arr:[1,2,3,4],
value:0
});
// 给数组末尾追加
function pushEvent(){
if(parameter.value>0){ // 只能添加大于0的数字
parameter.arr.push(parameter.value)
}
}
// 删除数组最后一个
function deleteEvent(){
parameter.arr.pop()
}
// **********************************************
// 2.数字加减
const sum = ref<number>(1)
function add(){
sum.value +=1
}
function reduce(){
sum.value -=1
}
export {
sum,
add,
reduce,
deleteEvent,
parameter,
pushEvent
}
我是马丁的车夫，欢迎转发收藏！