vue 在computed 中可以 设置一个计算对象吗

Question

类似于这样的，多层嵌套的计算属性，不知道是否可以？
computed: {

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

Answer 1

可以的啊，为什么不可以。只是你在使用的时候，需要 styles.slider

但是但是，这样没好处；建议还是分开。可以通过命名来解决 识别的问题；例如：styles_slider

---

按照提问人的需要，给出代码如下：

<template>
  <div id="app">
    {{time}}

    <div>
      {{obj.now.time}}
    </div>

    <button @click="update">当前时间</button>
  </div>
</template>

<script>
export default {
  name: 'app',
  data(){
    return{
      time:Date.now()
    }
  },
  computed: {
    obj(){
      /** 这里返回一个对象 */
      return {
        now:{
          time:`${this.time}`
        }
      }
    }
  },
  methods: {
    /** 修改名称 */
    update(){
      this.time = Date.now();
    }
  },
}
</script>

Answer 2

可以的，本质上computed就是一个pure function(不产生副作用)，只需要computed中使用到可以被watch对象/属性（data/compited）就是可以的。