类星体变量未更新答案

【问题标题】：Quasar variable not updating类星体变量未更新
【发布时间】：2020-12-09 04:51:21
【问题描述】：

为什么我的类星体变量 'offset' 没有在 UI 中更新，但控制台中的打印值更新了？我猜我没有正确使用 Ref 或 Computed 属性。变量基于计时器更新（增量）。

<template>
  <div
    class="viewport"
    style="
      width:320px;
      height:180px;
      background:red;
      position: relative;
      overflow:hidden;"
  >
    offset: {{ offset }}
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  ref,
  onMounted,
  onUnmounted
} from '@vue/composition-api';

export default defineComponent({
  name: 'Filmstrip',
  components: {},
  props: {
    src: {
      type: String,
      required: true
    }
  },
  setup(props, { emit, root }) {
    const { src } = props;

    const timer = null;
    let position = 0;
    let offset = '0px';
    const imageWidth = 10880;
    const frameWidth = 320;
    const fps = 60;
    const intervalTime = Math.round(1000 / fps) | 0;

    const runPlayer = () => {
      timer = setInterval(function() {
        position = Math.abs(position - 320) >= imageWidth ? 0 : position - 320;
        offset = `${position}px 0px`;
        console.log(offset);
      }, intervalTime);
    };

    onMounted(() => {
      runPlayer();
    });

    onUnmounted(() => {
      clearInterval(timer);
    });

    return { offset };
  }
});
</script>

<style lang="scss" scoped></style>

【问题讨论】：

标签： javascript quasar

【解决方案1】：

对于 composition-api 中的反应变量，您需要使用您已经导入的 ref 方法。您需要像这样初始化变量：

let offset = ref('0px')

然后你可以像使用value属性一样修改这个变量：

offset.value = `${position}px 0px`;

【讨论】：