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。

不包含捆绑软件中的计算属性。没有错误产生

1 个答案: