Javascript 在苗条的自定义方法中使用getter/setter

在自定义方法中使用get/set对时，我无法编译我的svelte组件。这是否不受支持？还是我做错了什么

例如：

假设我想要一个显示名称的组件，并且我想要使用设置名称。

com.name='新名称'；

但是，我只希望组件在名称中没有空格时使用该名称

<h1>Hello {{name}}!</h1>

<script>
    export default {
        data () {
            return {
                name: 'The Name',
            }
        },
        methods: {
            get displayName() {
                return this.get('name'); 
            },
            set displayName(val) {
                if (val.indexOf(' ') < 0) {
                    this.set('name', val);
                }
            }
        }
    }
</script>

这是一个回复-

---

我在文档中没有看到任何与此相关的内容。我不能使用setter，但我希望能够使用。

编辑：正如Rich Harris在下面的评论中指出的那样，getter和setter在

数据中不起作用，因为Svelte在内部将属性复制到普通JS对象（因此忽略getter和setter）。我认为下一个最好的方法是创建一个方法
name
，它可以像
name（）
那样作为getter调用，像
name（value）
那样作为setter调用

苗条代码：
tl；dr使用

这里的错误消息有点让人困惑-问题不在于重复属性，而是在
方法
中不能有getter和setter，这在任何情况下都是与填充组件内部状态的
数据
对象分开的（以及实例化时提供的数据和可能存在的任何计算值）

data
本身也不能有getter和setter，或者更确切地说，它可以，但它们不会被使用，因为从
data
函数返回的对象与内部state对象不同（否则我们都可能会遇到与变异相关的bug）

但实际上，创建一个包装器对象非常容易，它允许您获取和设置组件的数据：

函数换行（组件）{
var包装器={}；
var data=component.get（）；
Object.keys（数据）.forEach（key=>{
Object.defineProperty（包装器、键、{
得到（）{
返回组件.get（）[key]；
},
设置（值）{
set（{obj[key]：value}）；
}
})
});
返回包装器；
}
var component=新组件（{…}）；
var包装=包装（组件）；
wrapper.name='Rich'；

如果你愿意，你甚至可以做
component.data=wrap（component）
，然后你可以操纵
component.data.name
等等

我已经准备了一个演示这种方法-。
如果您在数据部分更改属性名称，这仍然是一个问题事件。它似乎与getter冲突。我将数据中的
名称更改为
显示名称
。同样的问题也会出现。问题是您没有将getter和setter从
移开方法
和into
数据
。尝试这样做，并让我知道会发生什么。在
数据
函数中使用访问器将不起作用，因为Svelte组件内部使用的状态对象是通过组合
数据
函数的返回值、实例化时提供的任何
数据
生成的POJOd组件的计算值（如果有）。换句话说，在实例化时，访问器只会被使用一次，然后被忽略。哦，糟糕。这太不幸了。谢谢你告诉我关于Svelte的内部结构。我想很不幸，OP将不得不使用另一种方法。@RichHarris所以我想不需要get函数，因为你可以使用
.get（'name'））
在组件上。制作一个
setName
自定义方法会是一种方法吗？我被错误误导了。谢谢你提出这个解决方案，我想它会派上用场的！
    Duplicate property 'displayName'

    49:             return this.get('name');
    50:         },
    51:         set displayName(val) {

<h1>Hello {{_name}}!</h1>

<script>
  export default {
    data() {
      return {
        _name: 'The Name'
      }
    },
    methods: {
      name(value) {
        if (value === void 0) return this.get('_name')
        this.set('_name', value)
      }
    }
  }
</script>

<h1>Hello {{name}}!</h1>

<script>
  export default {
    data() {
      return {
        _name: 'The Name',
        get name() {
          return this._name
        },
        set name(value) {
          / /.test(this._name) || (this._name = value)
        }
      }
    }
  }
</script>