走近Ts，用了爽，用后一直爽（二)

前言

上文《走近Ts，用了爽，用后一直爽（一)》
中写了Ts的一些类型、属性等简单语法，以及类、接口、装饰等高级用法后，今天我们来看看如何在vue项目中使用ts,目前使用公司项目用的较多的还是vue2.x,vue是渐进式的框架，我们学习也要渐进式的，所以本文也先围绕vue2.x来对Ts进行实战，为后期切换vue3.0打下基础。

简介

    在使用前我们要先在项目中安装Ts，安装过程就不细说了，如果只是学习，推荐用vue的官方脚手架，里面就带有安装Ts选项。接着要安装下vue-class-component和vue-property-decorator

   安装之前我们先了解下vue-class-component和vue-property-decorator

   vue-class-component是vue 的官方库，作用是以class的模式编写组件。这种编写方式使vue组件可以使用继承、混入等高级特性,更重要的是使 Vue 组件更好的跟TS结合使用。

   vue-property-decorator 是社区出的,
基于vue-class-component 拓展出了很多操作符 @Prop @Emit @Inject 等;可以说是 vue-class-component 的一个超集, 使代码更为简洁明了,options里面需要配置 decorator库不支持的属性, 比如components, filters, directives等。

    这两者都是离不开装饰器的，装饰器已在ES提案中。decorator是装饰器模式的实践。装饰器模式呢，它是继承关系的一个替代方案。动态地给对象添加额外的职责。在不改变接口的前提下，增强类的功能。

使用

Component

   装饰器可以接收一个对象作为参数，可以在对象中声明 components ，filters，directives等未提供装饰器的选项。

tip：要使用 Ts需要在 script标签的 lang属性值设为 ts

生命周期

方法、属性

computer(计算属性)

watch(监听)

tips: onNumChange方法要紧挨着 @Watch,它们中间不能有其他代码,而且这个方法名称可以自定义，没有强制要求。

ref

依赖注入

• Provide

• Inject

Prop

子组接收父组件传进来的值

• 父组件

• 子组件

Emit

向父组件发射个方法

• 父组件

• 子组件

PropSync

实现sync修饰符(prop双向绑定)

• 父组件

• 子组件

Model

实现v-model双向绑定

• 父组件

• 子组件