Vue+TypeScript入门学习，含详细项目代码，vuex状态管理

最新推荐文章于 2024-08-23 09:50:01 发布

Delicia_Lani

最新推荐文章于 2024-08-23 09:50:01 发布

阅读量2k

点赞数

分类专栏： WEB前端开发工程师 html 小程序开发 js css vue Studio 3T IOS 数据库 MongoDB Flutter React-Native

本文链接：https://blog.csdn.net/qq_29918313/article/details/94207065

版权

本文介绍了作者从零基础学习Vue和TypeScript的经历，包括Vue对TypeScript的支持、TypeScript的基本概念和与JavaScript的区别，以及在实际项目中遇到的挑战，如TS语法糖和Vuex的状态管理。文章详细讲解了如何使用Vue+TypeScript搭建项目，涉及到Vuex的getters、mutations、actions等，并给出了常见问题的解决方案。

摘要由CSDN通过智能技术生成

之所以写下这篇文章，是因为最近的项目需求，使用Vue,TypeScript实现项目，对我而言，是一个全新的挑战，因此，是零基础，不过各语言之间都是相通的，学起来也没有那么难。只是在真正实现项目的过程中，踩过了好多坑。

一，该链接中讲到Vue对typescript的支持：https://cn.vuejs.org/v2/guide/typescript.html

二，typescript是什么？

（1）TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。

（2）TypeScript 由微软开发的自由和开源的编程语言。

（3）TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

三，JavaScript 与 TypeScript 的区别

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。

TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

四，TS语法糖

官方文档：https://github.com/kaorun343/vue-property-decorator

单页面组件中，在 @Component({}) 里面写 props、data 等调用起来极其不方便，而 vue-property-decorator 里面包含了 8 个装饰符则解决了此类问题，他们分别为

@Emit 指定事件 emit，可以使用此修饰符，也可以直接使用 this.$emit()
@Inject 指定依赖注入）
@Mixins mixin 注入
@Model 指定 model
@Prop 指定 Prop
@Provide 指定 Provide
@Watch 指定 Watch

@Component export from vue-class-component

import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'

@Component
export class MyComponent extends Vue {
  
  @Prop()
  propA: number = 1

  @Prop({ default: 'default value' })
  propB: string

  @Prop([String, Boolean])
  propC: string | boolean

  @Prop({ type: null })
  propD: any

  @Watch('child')
  onChildChanged(val: string, oldVal: string) { }
}

上面的代码相当于：

export default {
  props: {
    checked: Boolean,
    propA: Number,
    propB: {
      type: String,
      default: 'default value'
    },
    propC: [String, Boolean],
    propD: { type: null }
  }
  methods: {
    onChildChanged(val, oldVal) { }
  },
  watch: {
    'child': {
      handler: 'onChildChanged',
      immediate: false,
      deep: false
    }
  }
}