Svelte без включения вычисляемых свойств в пакет. Ошибок не возникает

Я использую Пример вычисляемых свойств 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

Почему вычисляемое свойство не было включено в пакет?

Как сделать так, чтобы его включили в комплект?


661
1

Ответ:

Вычисляемые свойства должны быть частью определения компонента, а не параметров создания экземпляра, то есть вот так:

{hours}

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

Svelte определяет, какие вычисляемые свойства зависят от других свойств, и генерирует код (после их топологической сортировки в случае, когда одно вычисляемое свойство зависит от другого), который выполняет минимальную возможную работу по пересчету значений. Это возможно только во время компиляции, поэтому оно должно быть частью входных данных компилятора, а не параметром времени выполнения.

Раньше я не понимал, что это варианты инициализации - в данном случае data является - это объект, а не функция для генерации данных по умолчанию. В этом отношении это похоже на Ractive.