0

我正在使用Svelte 计算属性示例。具体来说，我正在复制示例：

在 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

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

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

4

1 回答 1

3

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

{hours}

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

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

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

于 2018-07-18T15:36:24.673 回答