将近一年没写过管理系统了,上一次用的还是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)
}
}
}