Javascript 类星体变量不更新

为什么我的类星体变量“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>

偏移量：{{offset}}
进口{
定义组件，
计算，
裁判，
加上，
勇敢的
}来自“@vue/compositionapi”；
导出默认定义组件({
名称：'电影带'，
组件：{}，
道具：{
src:{
类型：字符串，
必填项：true
}
},
设置（道具，{emit，root}）{
const{src}=props；
常数计时器=空；
设位置=0；
设偏移量='0px'；
常数imageWidth=10880；
const frameWidth=320；
常数fps=60；
常数间隔时间=数学轮（1000/fps）| 0；
常量runPlayer=（）=>{
计时器=设置间隔（函数（）{
位置=数学abs（位置-320）>=imageWidth？0：位置-320；
偏移量=`${position}px 0px`；
控制台日志（偏移量）；
}，休息时间）；
};
未安装（（）=>{
runPlayer（）；
});
onUnmounted（（）=>{
清除间隔（计时器）；
});
返回{offset}；
}
});

对于合成api中的反应变量，您需要使用已经导入的

ref

方法。您需要像这样初始化变量：

let offset = ref('0px')

然后，您可以像使用

value

property那样修改此变量：

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