Question

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

它们未在$data上公开，并且没有this.$computed

这样的内容

Answer 1

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

如果您确实需要计算属性名称和值的对象以进行测试，则可以使用$computed属性中的信息定义自己的_computedWatchers属性。这可能很挑剔，我不会在生产代码中使用它。

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>

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

1 个答案: