在 vue3 中，fake-progress 中的 progress 值不会在视图中更新，它始终为 0-解网

问：

在vue3中，我想为网络请求添加一个进度条，所以我使用fake-progress，但是我可以使用它，因为它的值没有响应这是我的代码：

<template>
    <div>
        {{ progress }}
        <!-- <el-progress type="circle" :percentage="parseInt(progress * 100)"></el-progress> -->
    </div>
</template>

<script setup>
import FakeProgress from 'fake-progress';
import { reactive, toRef, watch, watchEffect } from 'vue';

let fake = new FakeProgress({
    timeConstant: 1000,
    autoStart: true,
})

let fakeRef = reactive(fake)
let progress = toRef(fakeRef, 'progress')

setInterval(() => {
    console.log(fake.progress);
    console.log(fakeRef.progress);
    console.log(progress);
}, 1);

</script>

所有值都已更改，但在视图中 {{progress}} 始终为 0 我该怎么做？为什么会这样，五五五

我希望页面上的数字发生变化

vuejs3 条进度

<script setup>
import FakeProgress from 'fake-progress';
import { ref } from 'vue';

const fake = new FakeProgress({
    timeConstant: 1000,
    autoStart: true,
});

const progress = ref(0);

Object.defineProperty(fake, 'progress', {
  set(val){
    progress.value = val;
  },
  get(){
    return progress.value;
  }
});

</script>

<template>
    <div>
        {{ progress }}
    </div>
</template>

一个更聪明的解决方案是提供一个反应式对象来构造一个FakeProgress的实例：this

实时要点在这里。

<script setup>
import {FakeProgress} from './fake-progress.js';
import { reactive } from 'vue';

// create our custom reactive instance
const fake = reactive({});

// set prototype
Object.setPrototypeOf(fake, FakeProgress.prototype);

// call constructor
FakeProgress.bind(fake)({
    timeConstant: 1000,
    autoStart: true,
});

</script>

<template>
    <div>
        {{ fake.progress }}
    </div>
</template>

在 vue3 中，fake-progress 中的 progress 值不会在视图中更新，它始终为 0

In vue3, the value of progress in fake-progress is not updated in the view, it is always 0

评论

评论