将近一年没写过管理系统了，上一次用的还是vue2+js，这次接手的项目是Vue3+ts，一眼看过去好熟悉的style，第二眼开始蒙，数据写哪？计算属性咋写啊？

这里用到了一个第三方库vue-property-decorator。

一、变量声明

当我们在vue单文件中使用TypeScript时,引入vue-property-decorator之后,script中的标签就变为这样:

<script lang="ts">import {Vue, Component} from 'vue-property-decorator';@Component({})export default class "组件名" extends Vue{value1: string = "hello world";value2: number = 1;}
</script>

相当于之前js写法

<script lang="es6">import Vue from 'vue';export default {data(){return {value1: 'hello world',value2: 1}}}
</script>

总 结: 对于data里的变量,直接按ts定义类变量的写法写就可以。

二、计算属性

<script lang="ts">import {Vue, Component} from 'vue-property-decorator';@Component({})export default class "组件名" extends Vue{get vaule(){return true;}}
</script>

相当于下面这种：

<script lang="es6">import Vue from 'vue';export default {computed: {value: function() {return true;}}}
</script>

总 结: 对于computed属性, 变为get + 变量名的函数。

三、监听属性

可以用vue-property-decorator提供的@Watch装饰器来替换Vue中的watch属性,以此来监听值的变化。

import {Vue, Component, Watch} from 'vue-property-decorator';@Watch('child')
onChangeValue(newVal: string, oldVal: string){console.log(newVal,oldVal)
}@Watch('person', {immediate: true, deep: true})
onChangeValue(newVal: Person, oldVal: Person){console.log(newVal,oldVal)
}

等同于

export default{watch: {'child': this.onChangeValue// 这种写法默认 `immediate`和`deep`为`false`,'person': {handler: 'onChangeValue',immediate: true,deep: true}},methods: {onChangeValue(newVal, oldVal){console.log(newVal,oldVal)}}
}