访问 Vue 实例的计算属性对象答案

【问题标题】：Access Vue instance's computed properties object访问 Vue 实例的计算属性对象
【发布时间】：2018-01-22 15:17:19
【问题描述】：

Vue 组件公开了this.$data。有没有办法以类似的方式访问计算属性？

$data上没有暴露，也没有this.$computed这样的东西

【问题讨论】：

this.nameOfComputedProperty
@thanksd 正如问题所暗示的那样，我要求的是计算属性的集合，而不是显式选择它们
好吧，我不清楚
@thanksd 问题应该更清楚，抱歉:)

标签： vue.js vuejs2 vue-component

【解决方案1】：

没有内置方法可以使用 Vue 实例的计算属性来访问对象。

如果您真的想要一个计算属性名称和值的对象用于测试目的，您可以使用_computedWatchers 属性中的信息定义您自己的$computed 属性。这可能很挑剔，我不会在生产代码中使用它。

Object.defineProperty(Vue.prototype, '$computed', { 
  get() { 
    let computed = {};
    Object.keys(this._computedWatchers).forEach((key) => {
      computed[key] = this._computedWatchers[key].value;
    })
    return computed;
  }
})

new Vue({
  el: '#app',
  data() {
    return {
      foo: 1,
    }
  },
  computed: {
    bar() {
      return this.foo * 2;
    }
  },
  mounted() {
    console.log(this.$computed)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">{{ bar }}</div>

【讨论】：