Vue.js 深度嵌套计算属性

Question

在处理深度嵌套的计算属性时，我不太明白何时应该使用function() { return {} }以及何时不应该使用。

顺便提一下，这是在组件中的。

computed: {
        styles: function() {
            return {
                slider: function() {
                    return {
                        height: {
                            cache: false,
                            get: function() {
                                return 'auto';
                            }
                        },
                        width: {
                            cache: false,
                            get: function() {
                                return $('#slideshow').width();
                            }
                        }
                    }
                }
            }
        }
    },

这里返回的是undefined。当我删除滑块索引内的function() { return {} }后，使用styles.slider.width而不是get()返回时，它会返回一个对象。它只显示一个带有cache和get作为索引的对象。

非常感谢您的帮助！问这个问题的原因是因为我有多个嵌套组件涉及从父组件进行样式设置，例如滑块、标签、轮播图等。所以我想像这样组织它们。

- user3130415

---

也许我误解了，但是你是想使用 styles.slider.width.get() 还是 styles.slider.width？我认为后者不会作为getter工作，除非你明确地使用Object.defineProperties。 - fgshepard

你提到了“深度嵌套的计算属性”。为什么你认为这是可能的呢？计算属性不支持嵌套：http://vuejs.org/guide/computed.html - David K. Hess

Answer 1

我想你的意思是返回一个计算对象，但不需要以嵌套方式构造计算过程？

其他人所说的关于“computed”钩子没有嵌套语法的说法是正确的，你可能需要以不同的方式构造它。

以下方法可能适合您：我以类似的方式生成许多对象。

computed: {
   computedStyles(){
     var style = {slider:{}}
     style.slider.height = 'auto'
     style.slider.width = this.computedSlideshowWidth
     return style
   },
   computedSlideshowWidth(){
     return $('#slideshow').width()    
   }

- Screll

Answer 2

根据2020年和Vue 2.6.12，这是完全可能的。我相信自v.2以来一直都是可能的，但无法确认。

以下是一个可行的示例：

this.computed = {

    // One level deep nested, 
    // get these at `iscomplete.experience` 
    // or `iscomplete.volume`
    iscomplete: function() {
        return {
            experience: this.$data.experience !== null,
            volume: this.$data.volume > 100,
            // etc like this
        };
    },

    // More levels deep nested.
    // Get these at `istemp.value.v1 and `istemp.value.v2`
    istemp: function() {
        return {
            value1: {
                v1: this.$data.experience,
                v2: 'constant'
            }
        }
    }
    
};

因此，您将能够在模板中访问您的深度嵌套计算，例如以下代码：<span v-text="iscomplete.experience"></span>，它将输出上面第一个示例计算的结果<span>true</span>。

请注意：

1. 自Vue v.2起，cache键已被弃用；
2. Vue不会执行分配给computed对象嵌套键的函数；
3. 您不能为非Vue响应式事物设置计算属性，例如$('#slideshow').width()。这意味着在这种情况下（这是计算属性的唯一目的），它们不会在其内容更改时重新计算。因此，这些应从computed键中删除。

除此之外，我发现嵌套计算有时可以帮助我们更好地保持事物的顺序。

- Valentine Shi

---

@cezar :) 很高兴看到你真的很在意) 谢谢 - Valentine Shi

我喜欢这个答案，但我想知道它是否可以与getter和setter结合使用。 - cezar

@cezar 我没有使用getter，因为根据我的经验，整个方法已经太复杂了（嵌套从代码清晰度中借用了很多），需要简化。所以我改变了我的模式，总是非常简单的一级深度计算（代理到存储、布尔标志等）。如果我需要计算，它们会在其他地方完成（例如专用对象）。至于setter，这对我来说是非常罕见的用例。我再次更喜欢将计算委托给某些专用对象，而不是setter。 - Valentine Shi