解决响应式数据依赖响应式数据无响应问题

原创于 2022-07-22 12:03:15 发布 · 720 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #开发语言

网格化管理项目总结专栏收录该内容

9 篇文章

订阅专栏

在Vue3项目中，作者遇到了响应式属性的问题。当尝试让变量B依赖于变量A的变化时，发现B并未如预期响应A的更新。解决方法是将B转换为一个computed属性，这样B会根据A的值自动更新。

本次项目中使用了vue3的知识，vue3的响应式属性非常方便，但是我在使用中遇到这样的一个问题：

我先在页面中声明了一个响应式的变量A，然后因为需求又声明了另一个响应式的变量B，变量B的状态依赖变量A的改变而改变，然而在实际应用中发现，在A改变之后，B并无响应。

解决：
因为B仅在第一次运行setup时进行初始化，因此它只会进行初始化，而不会更新。如果希望B在A更新时进行更新，可以使其成为依赖于A的computed属性。

const scene_code = ref([] as number[]);
const zoneCode = computed(() => [
  {
    sceneCode: scene_code.value[0],
    scanNumber: scene_code.value[1],
    handout: scene_code.value[2],
    handoutPercent: scene_code.value[3],
  },
]);