为什么在vue typescript类组件中getter/setter不能正常工作

Question

我是vue.js新手，我想知道为什么下面的代码不能像预期的那样工作：

<template>
  <page-layout>
    <h1>Hello, Invoicer here</h1>
    <form class="invoicer-form">
      <div><label><span>Datum</span><input v-model="date" v-on:change="dateChanged" /></label></div>
      <div><label><span>Zeitraum</span><input v-model="timespan" /></label></div>
    </form>
  </page-layout>
</template>

<script lang="ts">
    import { Component, Prop, Vue } from 'vue-property-decorator'
    import PageLayout from '@/components/layout/PageLayout.vue'
    import dayjs from 'dayjs'
    import customParseFormat from 'dayjs/plugin/customParseFormat'

    @Component({
        components: { PageLayout }
    })
    export default class Invoicer extends Vue {

        date = ''
        _timespan = ''

        beforeCreate(): void {
            dayjs.extend(customParseFormat)
        }

        dateChanged(): void {
            const format = 'DD.MM.YYYY'
            const date = dayjs(this.date, format)
            if (date.isValid()) {
                if (!this.timespan) {
                    const from = date.subtract(1, 'month').startOf('month').format(format)
                    const until = date.endOf('month').format(format)
                    this.timespan = `${from} - ${until}`
                }
            }
        }

        get timespan(): string {
            return this._timespan
        }

        set timespan(value: string) {
            this._timespan = value
        }

    }
</script>

当我更改'Datum‘时，dateChanged()-method被执行，并用它的设置器设置_timespan-property。但是GUI不会更新。如果我删除setter/getter并直接使用_timespan`-属性，一切都会正常工作。我真的认为它也应该与setter/getter一起工作，或者在其他方法中，计算属性，不是吗？

Answer 1

好了，我把它弄好了。主要的问题是，定义的类在运行时根本不存在。vue-class-component插件只需使用该定义并基于它创建一个VueComponent。所以this并不是它看起来的样子。该插件添加属性作为数据属性，添加getter/setter作为计算属性。但它似乎没有添加以下划线开头的属性。就像猫头鹰在他的评论中提到的那样，这不是一个vue-class-compnent问题，而是一个有文档记录的vue行为：https://vuejs.org/v2/api/#data无论如何，如果我像下面这样修改代码，它就会工作：

    @Component({
        components: { PageLayout }
    })
    export default class Invoicer extends Vue {

        date = ''
        timesspan = ''

        beforeCreate(): void {
            dayjs.extend(customParseFormat)
        }

        dateChanged(): void {
            console.log("badsfls")
            const format = 'DD.MM.YYYY'
            const date = dayjs(this.date, format)
            if (date.isValid()) {
                if (!this.timespan) {
                    const from = date.subtract(1, 'month').startOf('month').format(format)
                    const until = date.endOf('month').format(format)
                    this.timespan = `${from} - ${until}`
                }
            }
        }

        get timespan(): string {
            return this.timesspan
        }

        set timespan(value: string) {
            this.timesspan = value
        }

    }

为属性指定一个不带下划线的其他名称可以解决这个问题。

但是我想我不会再使用vue-class-component插件了。对我来说，在转角处思考太多了。