Vue3+TypeScript开发实践总结

前言迟到的Vue3文章，其实早在今年3月份就翻过了Vue3。
去年年底，我又重新学习了TypeScript，为的是能上Vue3的车，开得更好。
在之前的公司4月份，上级领导交代了一项内部党务系统的开发工作。这个系统的前端是我一个人开发的。是一个B端系统，功能和需求都不是很复杂。它是用Vue3+TypeScript+ElementPlus开发的。它开发了两周，直到最终发布。这期间遇到了很多坑，很多都是无处可寻。经过慢慢思考，终于克服了。Vue3+TypeScript学习1.环境配置1.1安装最新的Vue脚手架npminstall-g@vue/cliyarnglobaladd@vue/cli1.2创建一个Vue3项目vuecreateprojectName1.3将已有的Vue2项目升级到Vue3vueaddtypescript2.攻击Vue32。1Vue2限制随着组件和组件依赖不断增长，组件难以阅读和维护没有完美的方法解决跨组件代码重用2.2Vue3如何解决Vue2限制组件难以维护和管理[inVue3在Vue3中编写组合函数，使用CompositonApisetUp来解决]没有完美的方法来解决跨组件代码复用三、Vue3CompositionApi3.1关于CompositionApi在Vue3中，不使用CompositionApi也可以编写组件，它只是在Vue3中编写组件的另一种方式，在内部简化了很多操作。所以可以继续使用Vue2的方式来写组件。3.2何时使用CompositionApiTypeScript的支持编写大型组件时，可以使用CompositionApi的组合功能很好地管理状态跨组件复用代码时4.CompositionApi必备基础4.1什么是setupsetup配置组件状态种类的实现。如果要在模板中使用，则必须返回设置中定义的状态和方法。注意：setup方法在组件、props数据方法ComputedLifecycle方法之前执行，不能在setup中访问它。4.2ref在Vue2中创建响应式变量，我们定义一个可以直接在data中定义并在模板中使用的响应式变量。如果我们使用组合api，我们必须在设置中使用ref创建一个响应变量，并且必须返回它才能在页面中使用它。使用引入refimport{ref}from'vue'初始变量constname=ref('指定默认值')returnvariablereturn{name}返回，也可以返回setup中访问定义变量值的方法，不能直接通过变量名来获取，必须通过变量名.value来获取对象。其价值在于状态管理方便，可以分为多个设置状态管理，最后全部导入一个文件中使用。4.3生命周期CompositionApilifecyclehook与Vue2optionlifecyclehook同名，只是在使用组合API时，前缀为on,onMounted`sd下面代码中有两个mounted生命周期hook，哪一个做你猜会先被处决？setup会先执行setup(){//定义响应变量consttitle=ref('前端自学社区')console.log(title)//返回变量functiongetTitle(){console.log(title.value)}//页面正在加载onMounted(getTitle)return{title}},mounted(){console.log('testmountedexecutionorder')},4.4watch使用watchresponsivechangesinsetup引入watch,import{watch}from'Vue'直接使用watch，watch接受3个参数监听更新的响应引用或getter函数和一个回调做更新操作可选配置项import{wathc}from'vue'//定义响应变量constnum=ref(0)//更新响应变量函数changeNum(){num.value++}//Wathc监控响应变量watch(num,(newValue,oldValue)=>{console.log(`newValueis:${newValue},--------oldValueis:${oldValue}`)})4.5computed也是从vue导入的，computed函数返回对作为第一个参数传递给computed的getter类回调的输出的只读反应引用。要访问新创建的计算变量的值，我们需要像使用ref一样使用.value属性。当num值变化时，nums的值会是*3import{ref,computed}from'vue';constnum=ref(0)//updatenumfunctionchangeNum(){num.value++}//监听num变化constnums=computed(()=>{returnnum.value*3})五、setup5.1接受两个参数props：父组件传递的属性，setup函数中的props是响应式的，会随着数据的更新而更新，并且不能使用ES6解构，因为它不会使props具有反应性。context：是一个普通对象，暴露了3个组件的propertyAttribute槽触发事件。context不是响应式的，所以可以使用ES6解构来简化编写。props:{obj:{type:Object}},setup(props,{attrs,slots,emit}){console.log(attrs)console.log(slots)console.log(emit)console.log(props.obj)}5.2注意组件加载setup的时候，组件执行setup的时候并没有创建组件实例，所以下面的属性数据computedmethods是访问不到的。第六，在setup中使用lifecycle时必须在lifecycle前面加上on前缀。setupbeforeCreate里面的option类型APIHook创建beforeMountonBeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdateonUpdatedbeforeUnmountonBeforeUnmountunmountedonUnmountederrorCapturedonErrorCapturedrenderTrackedonRenderTrackedrenderTriggeredonRenderTriggered7，要在Vue2components/3jectProvide中跨组件传值，要在setup中使用，必须从vue导入使用。使用Provide时，一般设置为响应式更新。在这种情况下，当父组件发生变化时，子组件和后代组件也会随之更新。如何将其设置为响应式更新？使用ref/reactive创建一个反应变量使用provide('name','reactivevariabletopass')最后添加一个事件来更新反应变量，这样当反应变量被更新时，provide中的变量也会被更新。父组件父组件import{provide,defineComponent,ref,reactive}from"vue";子组件八、在Vue中使用TypeScirpt技巧8.1接口约束约束属性采用TypeScript的特性，类型断言+接口完美约束属性接口分页查询字段属性类型验证导出默认接口queryType{page:Number,size:Number,name:String,age:Number}component使用importqueryTypefrom'../interface/Home'data(){return{query:{page:0,size:10,name:'test',age:2}asqueryType}},8.2组件使用defineComponent所以TypeScript正确推断Vue组件选项中的类型import{defineComponent}from'vue'exportdefaultdefineComponent({setup(){return{}}})8.3typedeclarationreactiveexportdefaultinterfaceProduct{name:String,price:Number,address:String}importProductfrom'@/interface/Product'import{reactive}from'vue'constproduct=reactive({name:'xiaomi11',price:5999,address:'Beijing'})asProductreturn{fatherData,info,product}上一篇文章如有错误，还望指教请在评论区纠正我。如果对你有帮助，请点赞关注~~~