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

我是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>

你好，我是发票员
资料
泽特劳姆
从“Vue属性装饰器”导入{Component，Prop，Vue}
从“@/components/layout/PageLayout.vue”导入PageLayout
从“dayjs”导入dayjs
从“dayjs/plugin/customParseFormat”导入customParseFormat
@组成部分({
组件：{PageLayout}
})
导出默认类发票扩展Vue{
日期=“”
_时间跨度=“”
beforeCreate（）：void{
扩展（customParseFormat）
}
dateChanged（）：void{
常量格式='DD.MM.YYYY'
const date=dayjs（this.date，格式）
if（date.isValid（））{
如果（！this.timespan）{
const from=date.subtract（1，'month'）.startOf（'month'）.format（格式）
const-till=date.endOf（'month'）。格式（format）
this.timespan=`${from}-${until}`
}
}
}
获取时间跨度（）：字符串{
返回此。\u timespan
}
设置时间跨度（值：字符串）{
此值为.\u timespan=value
}
}

---

当我更改“数据”时，将执行

dateChanged（）

-方法，并使用其setter设置

\u timespan

-属性。但是GUI不会被更新。如果我删除setter/getter并直接使用_timespan`-属性，一切都会正常工作。我真的认为它也应该与setter/getter或其他therms、computed属性一起工作，是吗？

好的，我让它工作了。主要问题是，定义的类在运行时根本不存在。vue类组件插件只需使用该定义并基于它创建VueComponent。所以这不是它看起来的样子。该插件将属性添加为数据属性，将getter/setter添加为计算属性。但它似乎没有添加以下划线开头的属性。就像他在评论中提到的Owl一样，这不是一个vue类组件问题，而是一个记录在案的vue行为： 不管怎样，如果我按如下方式更改代码，它会工作：

    @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类组件插件了。对我来说，这太过拐弯抹角了。

你为什么要首先使用getter和setter？也许你的方法与getter和setter的打字规则冲突。因为它们被认为是在普通物体内部使用的。我不确定一个组件是否被视为这样。我也不喜欢vue类组件。尝试一下使用composition API的Vue3，它现在有现成的TS支持（Vue3是用TS编写的），而且composition API感觉比AppProach类好多了，这听起来很有希望，感谢您的提示。Vue将用于我下周开始工作的新项目中。我不确定使用Vue 3是否已经是一个选项，因为它的测试版状态，但我认为一流的typescript支持使它绝对值得一试。它不再是测试版了，去年（我认为是9月）它被转移到了发布状态。我目前正在几个项目中使用它，在我看来是值得的。没有尝试过你的代码，但这似乎是Vue问题，而不是Vue类组件的问题，请检查