Vue3+TypeScript开发实践总结
前⾔
迟来的Vue3⽂章，其实早在今年3⽉份时就把Vue3过了⼀遍。
在去年年末⼜把TypeScript重新学了⼀遍，为了上 Vue3的车，更好的开车。
在上家公司4⽉份时，上级领导分配了⼀个内部的党务系统开发，这个系统前端是由我⼀个⼈来开发，功能和需求也不怎么复杂的⼀个B 端系统，直接上的Vue3 + TypeScript + Element Plus开发的，开发两周到最后的上线，期间也遇到很多⼩坑，很多⽆处可查，慢慢琢磨最后还是克服了。
Vue3 + TypeScript Study
⼀，环境配置
vue中reactive1.1 安装最新 Vue 脚⼿架
npm install -g @vue/cli
yarn global add @vue/cli
1.2 创建Vue3 项⽬
vue create projectName
1.3 现有Vue 2 项⽬升级到 Vue3
vue add typescript
⼆，进击Vue3
2. 1 Vue 2 局限性
1. 随着组件与组件依赖之间不断变⼤，组件很难读取和维护
2. 没有完美的⽅法解决跨组件代码重⽤
2.2 Vue 3 如何解决Vue 2 局限
1. 组件难以维护管理
【在Vue3 中编写组合函数，使⽤ Compositon Api setUp 来解决】
2. 没有完美的⽅法解决跨组件代码重⽤
三，Vue3 Composition Ap i
3.1 关于 Composition Api
在Vue3中，也可以不使⽤Composition Api来编写组件，它只是在Vue3 中编写组件中的另⼀种⽅法，内部简化了好多操作。所以你还可以继续使⽤ Vue2 的⽅式来编写组件。
3.2 什么时候使⽤Composition Api
1. TypeScript` 的⽀持
2. 编写⼤型组件时，可以使⽤Composition Api组合函数很好的管理状态
3. 跨组件重⽤代码时
四，Composition Api 必备基础
4.1 什么是setup
setup 是⽤来配置组件状态的另⼀种实现。
在setup 中定义的状态，⽅法要想在模板中使⽤，必须return
注意：
setup⽅法是在components , props data Methods Computed Lifecycle methods之前执⾏
同时在setup中是不能访问this
4.2 ref创建响应式变量
在Vue2中，我们定义⼀个响应式变量可以直接在data中定义并且在模板中使⽤该变量。如果使⽤的composition api的话，我们得在setup中使⽤ref来创建响应式变量，并且得将它返回，才能在页⾯中使⽤。
使⽤
1. 引⼊ref import { ref } from 'vue'
2. 初始变量const name = ref('指定默认值')
3. 返回变量return { name }在return中还可以返回⽅法
4. 在setup中访问定义的变量值，不能直接通过变量名来获取，必须通过变量名.value 来获取到该对象、值
这样的好处
状态好管理，可以划分好⼏个setup状态管理，最后在⼀个⽂件导⼊所有，并且使⽤。
<template>
<div>
<h1>{{title}}</h1>
</div>
</template>
<script>
import {ref,defineComponent} from 'vue'
export default defineComponent({
setup () {
// 定义响应式变量
const title = ref('前端⾃学社区')
// 访问该变量
console.log(title.value)
// 返回变量
return {title}
}
})
</script>
4.3 ⽣命周期
Composition Api⽣命周期钩⼦和Vue 2 选项式⽣命周期钩⼦名称⼀样，只是在使⽤组合式API时，前缀为 on, onMounted`
sd
下⾯代码中有两个 mounted ⽣命钩⼦，你猜哪个会先执⾏？
setup会先执⾏
setup () {
// 定义响应式变量
const title = ref('前端⾃学社区')
console.log(title)
// 返回变量
function getTitle(){
console.log(title.value)
}
// 页⾯在加载
onMounted(getTitle)
return {title}
},
mounted() {
console.log('测试 mounted 执⾏顺序')
},
4.4 watch
在setup中使⽤ watch响应式更改
引⼊ watch，import { watch } from 'vue'
直接使⽤watch，watch 接受 3 个参数
1. 要监听更新的响应式引⽤或者 getter 函数
2. ⼀个回调⽤来做更新后的操作
3. 可选配置项
import {wathc} from 'vue'
// 定义响应式变量
const num = ref(0)
/
/ 更新响应式变量
function  changeNum(){
num.value++
}
// wathc 监听响应式变量
watch(
num,(newValue, oldValue) => {
console.log(`newValue为：${newValue},--------oldValue为：${oldValue}`)
}
)
4.5 computed
它也是从vue导⼊，computed函数返回⼀个作为computed的第⼀个参数传递的 getter 类回调的输出的⼀个只读的响应式引⽤。为了访问新创建的计算变量的 value，我们需要像使⽤ref⼀样使⽤.value property。
**当num值变化时，nums 的值会 *3 **
import {ref,computed} from 'vue';
const num = ref(0)
//更新num
function  changeNum(){
num.value++
}
//监听num变化
const nums = computed(() =>{
return num.value * 3
})
五，setup
5.1 接受两个参数
props: ⽗组件传递过来的属性, setup` 函数中 props 是响应式的，它会随着数据更新⽽更新，并且不能使⽤ ES6 解构，因为它会不能使 props 为响应式。context : 它是⼀个普通的对象，它暴露3个组件的· property
1. Attribute
2. 插槽
3. 触发事件
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时，组件实例没有被创建，因此就⽆法访问以下属性
data
computed
methods
六，⽣命周期
在setup中使⽤⽣命周期时，前缀必须加on.
选项式 API Hook inside setup
beforeCreate
created
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeUnmount onBeforeUnmount
unmounted onUnmounted
errorCaptured onErrorCaptured
renderTracked onRenderTracked
renderTriggered onRenderTriggered
七，跨组件之间传值
在Vue 2中，我们可以使⽤Provide/Inject跨组件传值，在 Vue 3 中也可以。
在setup中使⽤，必须从vue中导⼊使⽤。
使⽤Provide时，⼀般设置为响应式更新的，这样的话，⽗组件变更，⼦组件，⼦孙组件也跟着更新。
怎么设置为响应式更新呢？
1. 使⽤ref / reactive创建响应式变量
2. 使⽤provide('name', '要传递的响应式变量')
3. 最后添加⼀个更新响应式变量的事件，这样响应式变量更新， provide中的变量也跟着更新。
⽗组件
⽗组件
import { provide, defineComponent, ref, reactive } from "vue";
<template>
<Son/>
</template>
<script>
import { provide, defineComponent, ref, reactive } from "vue";
export default defineComponent({
setup() {
const father = ref("我⽗组件");
const info = reactive({
id: 23,
message: "前端⾃学社区",
});
function changeProvide(){
}
provide('father',father)
provide('info',info)
return {changeProvide};
}
})
</script>
⼦组件
<template>
<div>
<h1>{{ssage}}</h1>
<h1>{{fatherData}}</h1>
</div>
</template>
<script>
import {provide, defineComponent,ref,reactive, inject} from 'vue'
export default defineComponent({
setup () {
const fatherData = inject('father')
const info = inject('info')
return {fatherData,info}
}
})
</script>
⼋，在Vue 中使⽤ TypeScirpt 技巧
8.1 接⼝约束约束属性
采⽤TypeScirpt的特性，类型断⾔ + 接⼝完美的对属性进⾏了约束interface
分页查询字段属性类型验证
export default  interface queryType{
page: Number,
size: Number,
name: String,
age:  Number
}
组件中使⽤
import queryType from '../interface/Home'
data() {
return {
query:{
page:0,
size:10,
name:'测试',
age: 2
} as queryType
}
},
8.2 组件使⽤来defineComponent定义
这样TypeScript正确推断Vue组件选项中的类型
import { defineComponent } from 'vue'
export default defineComponent({
setup(){
return{ }
}
})
8.3 类型声明reactive
export default  interface Product {
name:String,
price:Number,
address:String
}
import  Product from '@/interface/Product'
import {reactive} from 'vue'
const product = reactive({name:'xiaomi 11',price:5999,address:'北京'}) as Product
return {fatherData,info,product}
最后
⽂中如有错误，欢迎码友在评论区指正，如果对你有所帮助，欢迎点赞和关注~~~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。