Vue 3:无法为 ref 的 ref 获取或分配值?

问题描述 投票:0回答:1

我遇到了一个有趣的场景,在我自己的对象引用中有一个对象的引用。但是内部 ref 的值未定义,并且 value 属性根本无法取消引用。经过更多测试,我发现 null 的行为相同。似乎内部 ref 正在评估,所以无法达到 .value?

这是设计使然吗?无论如何都可以访问.value?

https://jsfiddle.net/CodeVirtue/mjf2yg5d/

const { ref } = Vue;

let options = {
  setup: function () {
    const outer = ref({
      innerUndefined: ref(undefined),
      innerNull: ref(null),
      innerObject: ref({}),
      innerZero: ref(0)
    });
    const outerUndefined = ref(undefined);
    const outerNull = ref(null);
    // Setting innerUndefined fails
    console.log('Attempting to set innerUndefined.value');
    try {
        outer.value.innerUndefined.value = { 'test': 1 };
    }
    catch (error) {
        console.log('FAIL: ' + error.toString());
    }
    // Setting innerNull fails
    console.log('Attempting to set innerNull.value');
    try {
        outer.value.innerNull.value = { 'test': 2 };
    }
    catch (error) {
        console.log('FAIL: ' + error.toString());
    }
    // Setting innerZero succeeds
    console.log('Attempting to set innerObject.value');
    outer.value.innerObject.value = { 'test': 3 };
    console.log('SUCCESS');
    // Setting innerZero succeeds
    console.log('Attempting to set innerZero.value');
    outer.value.innerZero.value = { 'test': 4 };
    console.log('SUCCESS');
    // Setting outerUndefined succeeds
    console.log('Attempting to set outerUndefined.value');
    outerUndefined.value = { 'test': 5 };
    console.log('SUCCESS');
    // Setting outerNull succeeds
    console.log('Attempting to set outerNull.value');
    outerNull.value = { 'test': 6 };
    console.log('SUCCESS');
    return {};
  }
};

Vue.createApp(options).mount('#app');
<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">See the console</div>

vue.js vuejs3
1个回答
0
投票

我的建议是减少键/值对的数量,一次使用一个。然后构建多个断言(FAIL 1、FAIL 2、FAIL 3),每个断言都是捕获中完全限定对象的不同级别。有错误不足以进行故障排除的详细信息。失败 1 是 outer.value。失败 2 为 outer.value.innerNull。失败 3 是 outer.value.innerNull.value.

现在,你的捕获有误。您需要 catch 中的对象变量来理解失败。这样,您就知道 outer 是否未定义,或者 outer.value 是否未定义,或者 outer.value.innerNull 是否未定义,或者 outer.value.innerNull.value 是否未定义。每个级别都需要一个值,以允许完全限定的对象具有值。现在,您的尝试在完全限定值上失败,但它可能是未定义的祖先对象。

如果您正在为所有用例构建 try/catch 块(意味着详尽无遗),我的建议是编写一个循环遍历对象级别的函数并返回作为罪魁祸首的级别以及变量(对象完全限定名称) .然后在第一次失败时使整个 JSON 失败。或者遍历失败的对象并打印一个失败。

例子:

请注意,祖先对象(即:outer 和 outer.value)的值为 [object: Object],因此这些级别看起来不错。我得到了失败的第 3 级。对其余用例重复此方法。

const { ref } = Vue;

let options = {
    setup: function () {
    const outer = ref({
      innerUndefined: ref(undefined)
      // innerNull: ref(null),
      // innerObject: ref({}),
      // innerZero: ref(0)
    });
    const outerUndefined = ref(undefined);
    const outerNull = ref(null);
    // Setting innerUndefined fails
    console.log('Attempting to set innerUndefined.value');
    try {
        outer.value.innerUndefined.value = { 'test': 1 };
    }
    catch (error) {
        console.log('FAIL: ' + outer.value.innerUndefined);
    }
    // Setting innerNull fails
    // console.log('Attempting to set innerNull.value');
    // try {
    //  outer.value.innerNull.value = { 'test': 2 };
    // }
    // catch (error) {
    //  console.log('FAIL: ' + error.toString());
    // }
    // Setting innerZero succeeds
    // console.log('Attempting to set innerObject.value');
    // outer.value.innerObject.value = { 'test': 3 };
    // console.log('SUCCESS');
    // Setting innerZero succeeds
    // console.log('Attempting to set innerZero.value');
    // outer.value.innerZero.value = { 'test': 4 };
    // console.log('SUCCESS');
    // Setting outerUndefined succeeds
    // console.log('Attempting to set outerUndefined.value');
    // outerUndefined.value = { 'test': 5 };
    // console.log('SUCCESS');
    // Setting outerNull succeeds
    // console.log('Attempting to set outerNull.value');
    // outerNull.value = { 'test': 6 };
    console.log('SUCCESS');
    return {};
  }
};

Vue.createApp(options).mount('#app');
© www.soinside.com 2019 - 2024. All rights reserved.