Svelte 不包括 bundle 中的计算属性。不产生错误

Question

我正在使用Svelte computed properties example。具体来说，我正在复制示例：

在 Works.html 中

<h1>{hours}</h1>

在我的 JS 中

const workViewer = new WorkViewer({
    target: document.querySelector('.works-wrapper'),
    data: function(){
        return {
            time: new Date()
        }
    },
    computed: {
        hours: ({ time }) => time.getHours()
    }
});

Rollup 编译我的 Svelte 包没有错误：

rollup v0.58.2
bundles public/js/index.js → public\js\bundle.js...
created public\js\bundle.js in 668ms

[2018-07-18 13:39:37] waiting for changes...

但是，在浏览器中，生成的模块缺少所有计算机属性。例如，hours 与

中提到的完全一样

<Works> was created without expected data property 'hours' bundle.js:12488:34

为什么计算属性没有包含在包中？

我怎样才能使它包含在捆绑包中？

Answer 1

计算属性必须是组件定义的一部分，而不是实例化选项——即像这样：

{hours}

<script>
  export default {
    data() {
      return { time: new Date() }
    },
    computed: {
      hours: ({ time }) => time.getHours()
    }
  };
</script>

Svelte 确定哪些计算属性依赖于哪些其他属性，并生成代码（在对它们进行拓扑排序之后，在一个计算属性依赖于另一个计算属性的情况下），该代码可以尽可能少地重新计算值。这只有在编译时才有可能，这就是为什么它必须是编译器输入的一部分，而不是运行时选项。

我之前没有意识到这些是初始化选项——在这种情况下，数据是一个对象，而不是一个用于生成默认数据的函数。在这方面它就像 Ractive。