前面聊了vue生命周期與路由的先后順序，現在聊聊computed與各生命周期。先聊一下需求背景，我在做一個圖表的時候遇到了，我將圖表樣式封裝為一個組件，然后各個地方需要的時候將數據通過props傳入到組件自動畫圖。因為我這個數據會變化，我的方法里面又有比較多的方法了，就像弄到計算屬性里面去，這樣在data里面也可以少定義一個屬性，然后問題就來了。我在子組件里面讀取的props竟然是未定義！！這個問題留到后面解釋。

上次我們知道了父組件子組件生命周期的關系，同理我在computed當中定義了一個屬性

computed:{test:function(){return '我是test'}}

然后我在父組件和子組件生命周期當中都打印出來了。當然我們的computed肯定是有一定的邏輯代碼才對的，所以我有寫下了這樣的測試

data:{a:23,b:32 }, computed:{test(){return this.a+this.b;} }

結果與上面一致，那么說明computed的屬性是在created之前就已經執行了。

好這個時候回到我們的問題，我在computed里面定義的為什么在子組件props里面未定義呢。

基于上面的結論我在父級打印我的test發現未定義，那么這個時候子組件的未定義就可以理解了。先貼上我的代碼吧

computed:{test(){this.ajax.get('url').then((res)=>{ return res.data; }) } }

相信很多人已經明白了，我這是一個異步操作，然而computed在beforeCreate的時候就已經執行了。這個時候我的test相當于沒有東西，當然是未定義了。所以導致我整個結構崩盤。

后來我的做法

在data里面定義好test，然后在方法里面建一個_test方法獲取數據以后去修改test。然后在子組件的watch里面定義一個監聽，監聽這個test，test變化就繪圖。

其實在computed里面我也嘗試過用watch去監聽,然后發現問題。computed里面的屬性是沒有直接的雙向數據綁定的。我在<input v-model='test'>直接修改是沒用的，只能修改它依賴的data屬性。官方也解釋了計算屬性的結果會被緩存，除非依賴的響應式屬性變化才會重新計算。

總結computed是嚴重依賴data屬性的，如果computed里面沒有依賴data里面的屬性，那就不要用computed了，真心沒用后面都沒辦法去修改。

寫的好像有些亂啊，反正我看了，不用吃槍吃毒了。

轉載于:https://www.cnblogs.com/axl-study/p/7098169.html

總結

以上是生活随笔為你收集整理的Vue computed参数与各生命周期关系（主要是异步的时候）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。