首页 > 其他 > 详细

使用ts开发vue项目知识点1

时间:2021-04-10 16:18:13      阅读:10      评论:0      收藏:0      [点我收藏+]
用ts开发项目变化还是挺大的
由于 TypeScript 默认并不支持 *.vue 后缀的文件,所以在 vue 项目中引入的时候需要创建一个 vue-shim.d.ts 文件,放在根目录下

declare module ‘*.vue‘ {
  import Vue from ‘vue‘;
  export default Vue;
}

  

1,单文件组件导出对象写法变了
原来直接export default {}
现在导出也是一个对象,这个对象的写法完全变了,它不是es6的的写法,不是类似react那种写法而是ts的写法,准备的说更像强类型语言写法,很像java。比如用private、publish以及protected声明变量。
   private foo = ‘App Foo!‘;
    private aa = 1

 

2,组件注册、watch、props以及computed
说是像java又不是java,至少我认知里面java里面是没有修饰器的。修饰器是ES7的提案,修饰器本质上是一个函数,是一个对类的行为作出修改。
vue-property-decorator这个东西是依赖于vue-class-component,可以简化书写。然后响应的写法发生了变化:
@Component({
  components: {
    HelloWorld
  }
}) // 组件
    @Prop({
       type: Object,
       required: false,
       default: {}
     }) // props
    @Prop({
      type: Object,
      required: false,
      default: {}
    })
// watch @Watch(‘formData‘, { immediate: true, deep: true }) @Watch(‘formData1‘, { immediate: true, deep: true }) // 计算属性 get ValA(){ return 1; }

  

当然emit也变了
@Emit(‘reset‘)
 
3,周期函数
变为对象的一个普通函数了,在对象里面直接写mounted(){}就行了,当然因为ts是强类型语言,所以需要在函数位置标记返回类型

使用ts开发vue项目知识点1

原文:https://www.cnblogs.com/zhensg123/p/14640803.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!