Я использую Пример вычисляемых свойств 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
Почему вычисляемое свойство не было включено в пакет?
Как сделать так, чтобы его включили в комплект?
Вычисляемые свойства должны быть частью определения компонента, а не параметров создания экземпляра, то есть вот так:
{hours}
<script>
export default {
data() {
return { time: new Date() }
},
computed: {
hours: ({ time }) => time.getHours()
}
};
</script>
Svelte определяет, какие вычисляемые свойства зависят от других свойств, и генерирует код (после их топологической сортировки в случае, когда одно вычисляемое свойство зависит от другого), который выполняет минимальную возможную работу по пересчету значений. Это возможно только во время компиляции, поэтому оно должно быть частью входных данных компилятора, а не параметром времени выполнения.
Раньше я не понимал, что это варианты инициализации - в данном случае data является - это объект, а не функция для генерации данных по умолчанию. В этом отношении это похоже на Ractive.