vue3.0+typescript,vue3.0 typescript
本文直接进入Vue3 TypeScript Element Plus开发的内容。有兴趣的话，来看看吧。
目录
Vue3类型脚本学习1、环境配置1.1安装最新的Vue脚手架
1.2创建Vue3项目二，攻击Vue32。1 Vue 2限制2.2 Vue 3如何解决Vue 2限制三、Vue3 Composition Ap i3.1关于Composition Api3.2何时使用Composition Api iv、Composition Api Essential Foundation 4.2 ref创建响应变量4.3生命周期4.4 watch4.5 computed V、setup5.1接受两个参数6、生命周期7、跨组件传递值8、在Vue中使用TypeScirpt Skill 8.1接口约束属性
8.2组件用于定义e组件的定义
Vue3 + TypeScript 学习
一， 环境配置
1.1 安装最新 Vue 脚手架
npm安装-g @vue/cli
yarn全局添加@vue/cli
1.2 创建Vue3 项目
vue创建项目名称
1.3将现有的Vue 2项目升级到Vue3
添加类型脚本
二， 进击Vue3
2. 1 Vue 2 局限性
随着组件之间依赖性的增加，组件变得难以阅读和维护。
没有完美的方法来解决跨组件代码重用。
2.2 Vue 3 如何解决Vue 2 局限
组件很难维护和管理。
【用Vue3写组合函数，用Compositon Api setUp求解】
没有完美的方法来解决跨组件代码重用。
三，Vue3 Composition Ap i
3.1 关于 Composition Api
在Vue3中，也可以不使用Composition Api来编写组件，这只是Vue3中编写组件的另一种方式，在内部简化了很多操作。
所以可以继续用Vue2写组件。
3.2 什么时候使用Composition Api
支持脚本` 1
编写大型组件时，可以使用Composition Api组合函数很好地管理状态。
当跨组件重用代码时
四，Composition Api 必备基础
4.1什么是设置
设置是用于配置组件状态的另一种实现。
设置中定义的状态，如果要在模板中使用该方法，则必须返回该方法。
注意：
设置方法在组件、道具数据方法计算生命周期方法之前执行。
同时，这在设置中无法访问。
4.2 ref 创建响应式变量
在Vue2中，我们定义了一个响应式变量，可以直接在数据中定义，在模板中使用。如果我们使用的composition api，我们必须在setup中使用ref来创建一个响应变量，并且我们必须在页面中使用它之前返回它。
使用：
从“vue”引入引用导入{ref}
初始变量const name=ref(指定默认值)
变量return {name}也可以返回方法。
在setup中访问已定义的变量值时，不能直接通过变量名获取，必须通过变量名获取对象和值。价值。
这样的好处：
好的状态管理，可以分几个设置状态管理，最后全部导入到一个文件中使用。
模板
差异
h1{{title}}/h1
/div
/模板
脚本
从“vue”导入{ref，defineComponent}
导出默认定义组件({
setup () {
//定义响应变量
Const title=ref(前端自学社区)
//访问此变量
console.log(标题.值)
//返回变量
返回{title}
}
})
/脚本
4.3 生命周期
Composition Api生命周期钩子与Vue 2 option生命周期钩子同名，只是在使用composition API时，前缀是on，onMounted。
在下面的代码中有两个挂载的生命钩子。猜猜哪个会先被执行？
将首先执行安装程序。
setup () {
//定义响应变量
Const title=ref(前端自学社区)
console.log(标题)
//返回变量
函数getTitle(){
console.log(标题.值)
}
//页面正在加载
onMounted(getTitle)
返回{title}
},
已安装(){
Console.log(测试安装执行顺序)
},
4.4 watch
在设置中使用观察响应变化
1.介绍手表，从“vue”导入{watch}
2.直接用手表。手表接受 3 个参数
用于监听更新的响应引用或获取函数
回调用于执行更新操作。
可选配置项目
从“vue”导入{wathc}
//定义响应式变量
const num=ref(0)
//更新响应式变量
函数changeNum(){
数值
}
//wathc监听响应式变量
手表（
数量，(新值，旧值)={
console.log(`newValue为：$ {新值},-旧值为：${oldValue} `)
}
)
4.5 computed
它也是从某视频剪辑软件导入，已计算函数返回一个作为计算的第一个参数传递的吸气剂类回调的输出的一个只读的响应式引用。为了访问新创建的计算变量的值，我们需要像使用裁判员一样使用。价值属性。
当num值变化时，nums 的值会 *3
从“vue”导入{ref，computed }；
const num=ref(0)
//更新数字
函数changeNum(){
数值
}
//监听数字变化
const nums=computed(()={
返回数值* 3
})
五，setup
5.1 接受两个参数
道具：父组件传递过来的属性，设置函数中小道具是响应式的，它会随着数据更新而更新，并且不能使用ES6解构，因为它会不能使小道具为响应式。
背景：它是一个普通的对象，它暴露3个组件的财产
属性
插槽
触发事件
语境不是响应式的，所以可以使用ES6解构来简便写法。
道具：{
目标
类型：对象
}
},
设置（道具，{属性，插槽，发射}) {
console.log(属性)
console.log(插槽)
console.log(发出)
console.log(props.obj)
}
5.2 组件加载设置时注意
在组件执行设置时，组件实例没有被创建，因此就无法访问以下属性
数据
计算
方法
六，生命周期
在设置中使用生命周期时，前缀必须加开着。
七， 跨组件之间传值
在Vue 2中，我们可以使用提供/注入跨组件传值，在Vue 3中也可以。
在设置中使用，必须从某视频剪辑软件中导入使用。
使用提供时，一般设置为响应式更新的，这样的话，父组件变更，子组件，子孙组件也跟着更新。
怎么设置为响应式更新呢？
使用参考/反应创建响应式变量
使用提供(名称,要传递的响应式变量)
最后添加一个更新响应式变量的事件，这样响应式变量更新，提供中的变量也跟着更新。
父组件：
从“vue”导入{ provide，defineComponent，ref，reactive }。
模板
儿子/
/模板
脚本
从“vue”导入{ provide，defineComponent，ref，reactive }。
导出默认定义组件({
setup() {
const father=ref(我父组件);
常量信息=反应({
id: 23，
消息： 前端自学社区，
});
函数changeProvide(){
info.message=测试
}
提供("父亲",父亲)
提供("信息",信息)
返回{更改提供}；
}
})
/脚本
子组件：
模板
差异
h1{{info.message}}/h1
h1{{fatherData}}/h1
/div
/模板
脚本
从“vue”导入{提供、定义组件、引用、反应、注入}
导出默认定义组件({
setup () {
const fatherData=inject(father )
const info=inject(info )
返回{父数据，信息}
}
})
/脚本
八， 在Vue 中 使用 TypeScirpt 技巧
8.1 接口约束约束属性
采用TypeScirpt的特性，类型断言接口完美的对属性进行了约束
连接
分页查询 字段属性类型验证：
导出默认接口查询类型{
页码：数字，
尺寸：数量，
名称：字符串，
年龄：数量
}
组件中使用：
从导入查询类型./接口/主页
data() {
返回{
查询：{
页面：0,
尺码：10,
名称：测试，
年龄：2岁
}作为查询类型
}
},
8.2 组件使用 来 defineComponent 定义
这样以打字打的文件正确推断某视频剪辑软件组件选项中的类型
从“vue”导入{定义组件}
导出默认定义组件({
setup(){
返回{ }
}
})
8.3 类型声明反应的
导出默认界面产品{
名称：字符串，
价格：数量，
地址：字符串
}
从"@/界面/产品"导入产品
从“vue”导入{反应性}
常数乘积=反应({name:小米11 ,价格：5999,地址：北京})作为产品
返回{父数据，信息，产品}
以上就是Vue3打字稿开发总结的详细内容，更多关于Vue3打字稿的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。