正文

vue3+typescript开发实践总结(代码片段)

大新  大新  2022-12-10  445

关键词：

前言

迟来的Vue3文章,其实早在今年3月份时就把Vue3过了一遍。<br/>在去年年末又把 TypeScript 重新学了一遍，为了上 Vue3 的车，更好的开车。<br/>在上家公司4月份时，上级领导分配了一个内部的 党务系统开发 ，这个系统前端是由我一个人来开发，功能和需求也不怎么复杂的一个B 端 系统，直接上的 Vue3 + TypeScript + Element Plus 开发的，开发两周到最后的上线，期间也遇到很多小坑，很多无处可查，慢慢琢磨最后还是克服了。

Vue3 + TypeScript Study

一，环境配置

1.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 局限性

随着组件与组件依赖之间不断变大，组件很难读取和维护
没有完美的方法解决跨组件代码重用

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

使用

1. 引入 ref import ref from \'vue\'
1. 初始变量 const name = ref(\'指定默认值\')
1. 返回变量 return name 在return中还可以返回方法
1. 在 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`

下面代码中有两个 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

Attribute
插槽
触发事件

`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 时，一般设置为响应式更新的，这样的话，父组件变更，子组件，子孙组件也跟着更新。

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

使用 ref / reactive 创建响应式变量
使用 provide(\'name\', \'要传递的响应式变量\')
最后添加一个更新响应式变量的事件，这样响应式变量更新， 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()
      info.message = \'测试\'
    
    provide(\'father\',father)
    provide(\'info\',info)
    return changeProvide;
    
    
)
</script>

子组件

<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`

分页查询 字段属性类型验证
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

最后

文中如有错误，欢迎码友在评论区指正，如果对你有所帮助，欢迎点赞和关注~~~

基于vue3和typescript项目大量实践后的思考

...聚焦，它讲究的是相关业务的聚合性。完全良好的支持了TypeScript，类型校验也成为了以后Vue3进行大型项目开发的质量保障，同时这也是面向了趋势--前端的未来就是TypeScript！compositonApi的本质，体现在代码里面，也就是一个setup... 查看详情

vue3的composition-api实践总结(代码片段)

因为向往已久vue3的开发方式，但是组内有很多历史项目，并且我们受制于ie的支持，所以我们决定在vue2中引入composition-api，来使用他的新特性。在使用过程中，我们遇到了很多问题，也积累了一些经验ÿ... 查看详情

基于vue3和typescript项目大量实践后的思考

↓推荐关注↓概述Vue3出来已经有一段时间了，在团队中，也进行了大量的业务实践，也有了一些自己的思考。总的来说，Vue3无论是在底层的原理上，还是在业务的实际开发中，都有了长足的进步。使用prox... 查看详情

vue3vuextypescript项目实践工具类封装(代码片段)

...版正式上线，作为新技术热爱者，新项目将正式使用vue3.0开发；接下来总结（对自己技术掌握的稳固）介绍（分享有需要的猿友）上篇博客介绍了vue3.0常用语法及开发技巧；有需要的请点击Vue3.0进阶、环境搭建、相关API的使用觉... 查看详情

基于vue3和typescript项目大量实践后的思考

...xff0c;大大的提升了我们代码的可读性。完全良好的支持了TypeScript，类型校验也成为了以后Vue3进行大型项目开发的质量保障，同时这也是面向了趋势--前端的未来就是T 查看详情

typescript开发环境的最佳实践(代码片段)

Typescript开发环境的最佳实践0??gitinit（略）1????初始化：$yarnadd-Dts-nodetypescript2??生成tsconfig.json：$yarntsc-init3??配置TSLint：$yarnaddtslint-D4??生成tslint.json：$yarntslint--init5??创建src/index.ts：$mkdirsrc&&e 查看详情

buildingvue3+typescript+withoutcli最佳实践

...着学习的精神，我决定尝试下从零开始自己搭建一个Vue3+Typescript的项目第一件事就是初始化一个项目然后添加依赖,对Vue3实现最基本的支持添加webpack配置当webpack基本配置好后，添加scripts命令来运行为了避免.vue文件使用ts报错，... 查看详情

基于vue3和typescript项目大量实践后的思考

...xff0c;大大的提升了我们代码的可读性。完全良好的支持了TypeScript，类型校验也成为了以查看详情

vue3+typescript封装axios并进行请求调用(代码片段)

不是吧，不是吧，原来真的有人都2021年了，连TypeScript都没听说过吧？在项目中使用TypeScript虽然短期内会增加一些开发成本，但是对于其需要长期维护的项目，TypeScript能够减少其维护成本，使用TypeScript增加了代码的可读性和... 查看详情

vue3系列之03——vue3使用typescript

...助防止许多潜在的运行时错误，这就是为什么Vue3是用TypeScript编写的。这意味着在Vue应用开发中，使用TypeScript进行开发不需要任何其他工具。TypeScript在Vue3世界中是一等公民。有两种方式，可以实现在Vue3应用中支持使... 查看详情

vue3实践vue3使用vite处理环境变量打包部署nginx配置(代码片段)

...1.nginx配置3.2.静态站点根路径配置4.总结1.前言由于在日常开发中会有一部分前端的开发任务，会涉及到Vue的项目的搭建、迭代、构建发布等操作，所以想系统的学习一下Vue相关的知识点，本专题会依照Vue的搭建、开发... 查看详情

vue3不要再使用vuex(代码片段)

...目，那么推荐你使用Pinia开发。Pinia的优点1、完整的TypeScript支持：与在Vuex中添加TypeScript相比，添加TypeScript更容易。2、极其轻巧（体积约1KB）3、store 查看详情

typescript前端工程最佳实践

作者：王春雨前言随着前端工程化的快速发展，TypeScript变得越来越受欢迎，它已经成为前端开发人员必备技能。TypeScript最初是由微软开发并开源的一种编程语言，自2012年10月发布首个公开版本以来，它已得到了人们的广泛... 查看详情

vue3-javascript如何使用vue3创建一个基于webstorm开发自动提示和自动格式化代码规则的工程！

第一种方法【推荐使用】：参考【Vue3-TypeScript】工程创建流程【取消其中的TypeScript安装】即可【Vue3-TypeScript】如何使用vue3创建一个基于【webstorm开发】自动提示和自动格式化代码规则的工程！_比特币爱好者007的博客-CSDN... 查看详情

使用vue3+typescript开发小程序

参考技术A要求是使用vue3+typescript进行开发小程序和H5的跨端应用在uniapp和taro这两个之中进行选择在参了官方和社区示例后最终选择了taro。原因在于uniapp目前对于vue3的支持尚不完全比如说暂不支持setup语法糖对于h5的支持比较差... 查看详情

vue3学习总结笔记(十三)(代码片段)

...建2.2使用Vite创建Vue3工程3.Vue3之分析工程结构3.Vue3之安装开发者工具4.Vue3之setup5.Vue3之ref函数5.1ref函数处理基本数据类型5.2ref函数处理对象类型6.Vue3之reactive函数7.Vue3之与vue2进行比较7.1Vue2响应式原理以及注意事项7.2Vue3的响应式原... 查看详情

vue3学习总结笔记(十三)(代码片段)

vue3+typescript实战记录二（typescript-eslint）

参考技术A本文记录一些vue3+typescript+less开发过程中的一些小问题。不断开发、不断更新...vue.config.js文件中require('path')加载path模块，eslint报错errorRequirestatementnotpartofimportstatement。对应eslint规则：戳这里vue.config.js中设置别名a... 查看详情

正文

vue3+typescript开发实践总结(代码片段)

前言

Vue3 + TypeScript Study

一， 环境配置

1.1 安装最新 Vue 脚手架

1.2 创建Vue3 项目

1.3 现有Vue 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.1 什么是 setup

注意：

4.2 ref 创建响应式变量

使用

这样的好处

4.3 生命周期

4.4 watch

4.5 computed

五，setup

5.1 接受两个参数

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

5.2 组件加载 setup 时注意

六，生命周期

七， 跨组件之间传值

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

父组件

子组件

八， 在Vue 中 使用 TypeScirpt 技巧

8.1 接口约束约束属性

interface

组件中使用

8.2 组件使用 来 defineComponent 定义

8.3 类型声明 reactive

最后

基于vue3和typescript项目大量实践后的思考

vue3的composition-api实践总结(代码片段)

基于vue3和typescript项目大量实践后的思考

vue3vuextypescript项目实践工具类封装(代码片段)

基于vue3和typescript项目大量实践后的思考

typescript开发环境的最佳实践(代码片段)

buildingvue3+typescript+withoutcli最佳实践

基于vue3和typescript项目大量实践后的思考

vue3+typescript封装axios并进行请求调用(代码片段)

vue3系列之03——vue3使用typescript

vue3实践vue3使用vite处理环境变量打包部署nginx配置(代码片段)

vue3不要再使用vuex(代码片段)

typescript前端工程最佳实践

vue3-javascript如何使用vue3创建一个基于webstorm开发自动提示和自动格式化代码规则的工程！

使用vue3+typescript开发小程序

vue3学习总结笔记(十三)(代码片段)

vue3学习总结笔记(十三)(代码片段)

vue3+typescript实战记录二（typescript-eslint）

一，环境配置

1.3 现有Vue 2 项目升级到 Vue3

二，进击Vue3

四，`Composition Api 必备基础`

4.1 什么是 `setup`

4.2 `ref` 创建响应式变量

4.3 `生命周期`

4.4 `watch`

4.5 `computed`

五，`setup`

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

5.2 组件加载 `setup` 时注意

六，`生命周期`

七，跨组件之间传值

八，在Vue 中使用 TypeScirpt 技巧

`interface`

8.2 组件使用来 `defineComponent` 定义

8.3 类型声明 `reactive`