基于SqlSugar的开发框架循序渐进介绍（11）-- 使用TypeScript和Vue3的Setup语法糖编写页面和组件的总结
基于SqlSugar的开发框架循序渐进介绍（11）-- 使用TypeScript和Vue3的Setup语法糖编写页面和组件的总结
随着Vue3和TypeScript的大浪潮不断袭来，越来越多的Vue项目采用了TypeScript的语法来编写代码，而Vue3的js中的Setup语法糖也越来越广泛的使用，给我们这些以前用弱类型的JS语法编写Vue代码的人不少冲击，不过随着大量的学习和代码编写，经历过一段难熬的时间后，逐步适应了这种和之前差别不小的写法和冲击。本篇随笔介绍总结了Vue3中一些常见的基于TypeScript的Setup语法与组合式 API的处理代码案例。
TypeScript（简称ts）是微软推出的静态类型的语言，相比于js，TypeScript拥有强类型、编译器严谨的语法检查、更加严苛的语法，TypeScript 是 JS类型的超集，并支持了泛型、类型、命名空间、枚举等特性，弥补了 JS 在大型应用开发中的不足。TypeScript 是 JavaScript 的强类型版本，最终在浏览器中运行的仍然是 JavaScript，所以 TypeScript 并不依赖于浏览器的支持，也并不会带来兼容性问题。
基于TypeScript的Setup语法糖写法越来越多，熟练使用的话，需要一个学习过程，另外ElementPlus控件也有了一些不同的变化，而且它的官方案例代码基本上采用了Setup语法糖的写法来提供例子代码。
我们也可以将 prop 的类型移入一个单独的接口中：
有时候，我们还需要给指定的prop属性给定默认值，那么也可以通过函数withDefaults一起进行处理即可。
如下面是我们指定模块定义的prop接口信息和defineProps的处理代码。
7、Watch函数的使用
有时候，子组件需要监控自身某个值的变化，然后进行相关的处理，那么对值进行监控就需要用到了watch函数。
// 监听外部对props属性变更,如通过ResetFields()方法重置值的时候watch( () => props.modelValue, newValue => { console.log(newValue); emit("update:modelValue", newValue + ""); });watch( () => props.options, newValue => { newValue.forEach(item => { dictItems.value.push(item); }); });
8、onMounted函数的使用
我们一般在 onMounted 的逻辑里面准备好组件或者页面显示的内容，这里面在页面组件准备妥当后进行更新显示。
//页面初始化加载onMounted(() => { getlist();});
或者组件里面
//挂载的时候初始化数据onMounted(async () => { var typeName = props.typeName; var options = props.options; if (typeName && typeName !== "") { // 使用字典类型，从服务器请求数据 await dictdata.GetTreeItemByDictType(typeName).then(list => { if (list) { list.forEach(item => { dictItems.value.push({ id: item.id, label: item.label }); }); } }); } else if (options && options.length > 0) { // 使用固定字典列表 options.map(item => { dictItems.value.push({ id: item.id, label: item.label }); }); } // 设置默认值 keyword.value = props.modelValue;});
9、自定义组件的ModelValue
一般组件在绑定值的时候，一般使用v-Model的属性来设置它的值。
或者日期组件
因此我们自定义开发的组件，也应该采用这样约定的属性。这里面的v-Model对应的prop属性就是modelValue的，因此我们需要定义这个属性，并处理Emits事件就可以了。
并在Watch监控它的变化，触发组件的自定义事件
watch( () => props.modelValue, newValue => { console.log(newValue); emit("update:modelValue", newValue + ""); });
10、自定义引入Vue的API和组件
上面所有的setup语法糖代码里面，我们在开始的时候，往往都需要引入ref，reactive等API，如下代码所示。