Vue3 + TypeScript 开发总结

203 阅读 0 评论 134 点赞

我是靠谱客的博主殷勤万宝路，这篇文章主要介绍Vue3 + TypeScript 开发总结，现在分享给大家，希望可以做个参考。

Vue3 + TypeScript 学习

一，环境配置

1.1 安装最新 Vue 脚手架

复制代码

1
2
npm install -g @vue/cli
yarn global add @vue/cli

1.2 创建Vue3 项目

复制代码

1
vue create projectName

1.3 现有Vue 2 项目升级到 Vue3

复制代码

1
vue add typescript

二，进击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

TypeScript` 的支持
编写大型组件时，可以使用 Composition Api 组合函数很好的管理状态
跨组件重用代码时

四，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 来创建响应式变量，并且得将它返回，才能在页面中使用。

使用：

引入 ref import { ref } from 'vue'
初始变量 const name = ref('指定默认值')
返回变量 return { name } 在return中还可以返回方法
在 setup 中访问定义的变量值，不能直接通过变量名来获取，必须通过变量名.value 来获取到该对象、值

这样的好处：

状态好管理，可以划分好几个 setup 状态管理，最后在一个文件导入所有，并且使用。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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`

下面代码中有两个 mounted 生命钩子，你猜哪个会先执行？

setup 会先执行

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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响应式更改

1.引入 watch， import { watch } from 'vue'

2.直接使用watch，watch 接受 3 个参数

要监听更新的响应式引用或者 getter 函数
一个回调用来做更新后的操作
可选配置项

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
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

Attribute
插槽
触发事件

context 不是响应式的，所以可以使用ES6 解构来简便写法。

复制代码

1
2
3
4
5
6
7
8
9
10
11
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.

七，跨组件之间传值

在 Vue 2 中，我们可以使用 Provide/Inject 跨组件传值，在 Vue 3 中也可以。

在 setup 中使用，必须从 vue 中导入使用。

使用 Provide 时，一般设置为响应式更新的，这样的话，父组件变更，子组件，子孙组件也跟着更新。

怎么设置为响应式更新呢？

使用 ref / reactive 创建响应式变量
使用 provide('name', '要传递的响应式变量')
最后添加一个更新响应式变量的事件，这样响应式变量更新， provide 中的变量也跟着更新。

父组件:

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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(){
      info.message = '测试'
    }
    provide('father',father)
    provide('info',info)
    return {changeProvide};
    }
    
})
</script>

子组件：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
    <div>
        <h1>{{info.message}}</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

分页查询字段属性类型验证：

复制代码

1
2
3
4
5
6
export default  interface queryType{
    page: Number,
    size: Number,
    name: String,
    age:  Number
}

组件中使用：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
import queryType from '../interface/Home'


    data() {
        return {
            query:{
                page:0,
                size:10,
                name:'测试',
                age: 2
            } as queryType
        }
    },

8.2 组件使用来 defineComponent 定义

这样 TypeScript 正确推断 Vue 组件选项中的类型

复制代码

1
2
3
4
5
6
7
import { defineComponent } from 'vue'

export default defineComponent({
    setup(){
        return{ }
    }
})

8.3 类型声明 reactive

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
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}

以上就是Vue3 + TypeScript 开发总结的详细内容，更多关于Vue3 + TypeScript的资料请关注靠谱客其它相关文章！

最后

以上就是殷勤万宝路最近收集整理的关于Vue3 + TypeScript 开发总结的全部内容，更多相关Vue3内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：JavaScript
浏览次数：203 次浏览
发布日期：2022-05-13 03:10:02
本文链接：https://www.kaopuke.com/article/k-p-k_14_u_7_ogf4_13__23_kx.html

Vue3 + TypeScript 开发总结

目录

Vue3 + TypeScript 学习

一，环境配置

1.1 安装最新 Vue 脚手架

1.2 创建Vue3 项目

二，进击Vue3

2. 1 Vue 2 局限性

2.2 Vue 3 如何解决Vue 2 局限

三，Vue3 Composition Ap i

3.1 关于 Composition Api

3.2 什么时候使用Composition Api

四，Composition Api 必备基础

4.2 ref 创建响应式变量

4.3 生命周期

4.4 watch

4.5 computed

五，setup

5.1 接受两个参数

六，生命周期

七，跨组件之间传值

八，在Vue 中使用 TypeScirpt 技巧

8.1 接口约束约束属性

8.2 组件使用来 defineComponent 定义

最后

评论列表共有 0 条评论

发表评论取消回复

Vue3 + TypeScript 开发总结

目录

Vue3 + TypeScript 学习

一， 环境配置

1.1 安装最新 Vue 脚手架

1.2 创建Vue3 项目

二， 进击Vue3

2. 1 Vue 2 局限性

2.2 Vue 3 如何解决Vue 2 局限

三，Vue3 Composition Ap i

3.1 关于 Composition Api

3.2 什么时候使用Composition Api

四，Composition Api 必备基础

4.2 ref 创建响应式变量

4.3 生命周期

4.4 watch

4.5 computed

五，setup

5.1 接受两个参数

六，生命周期

七， 跨组件之间传值

八， 在Vue 中 使用 TypeScirpt 技巧

8.1 接口约束约束属性

8.2 组件使用 来 defineComponent 定义

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

微信扫一扫：分享

一，环境配置

二，进击Vue3

七，跨组件之间传值

八，在Vue 中使用 TypeScirpt 技巧

8.2 组件使用来 defineComponent 定义

发表评论取消回复