訪問Vue實例的計算屬性對象

Question

Vue組件暴露this.$data。有什麼辦法以類似的方式訪問計算的屬性？

他們不暴露$data，並沒有爲this.$computed

Answer 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>