Vue3.0+TS管理系统基础使用之变量声明、计算属性、监听属性

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