根據調試工具看Vue源碼之watch

monw3c 發布于2019-08-23 16:20 / 1350人閱讀

摘要：實例將會在實例化時調用，遍歷對象的每一個屬性。我們期待的是斷點停下后，調用棧中出現相關的函數，提供我們分析原理的依據。抱著上面的意圖以及期待，我們新建一個項目，同時寫入以下代碼刷新頁面后右邊的調用棧顯示如下

官方定義

類型：{ [key: string]: string | Function | Object | Array }

詳細：

一個對象，鍵是需要觀察的表達式，值是對應回調函數。值也可以是方法名，或者包含選項的對象。Vue 實例將會在實例化時調用 $watch()，遍歷 watch 對象的每一個屬性。

初次探索

我們的意圖是 —— 監測app這個變量，并在函數中打下一個斷點。
我們期待的是 —— 斷點停下后，調用棧中出現相關的函數，提供我們分析watch原理的依據。

抱著上面的意圖以及期待，我們新建一個Vue項目，同時寫入以下代碼：

created () {
    this.app = 233
},
watch: {
    app (val) {
      debugger
      console.log("val:", val)
    }
}

刷新頁面后右邊的調用棧顯示如下

GPU云服務器云服務器看動畫學算法之:hashtable vue源碼 vue webrtc 源碼源碼中文說明之

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102914.html

根據調試工具看Vue源碼之生命周期（一）

摘要：由于工作中經常使用調試工具來定位問題，覺著這東西真的挺好用。突然有一天受到啟發，想著我學習源碼是否也可以通過調試工具呢因此，誕生了這篇文章來記錄我的一些學習成果，后續應該會寫成一個系列。由于工作中經常使用chrome調試工具來定位問題，覺著這東西真的挺好用。突然有一天受到啟發，想著：我學習源碼是否也可以通過調試工具呢？因此，誕生了這篇文章來記錄我的一些學習成果，后續應該會寫成一個...

My_Oh_My 2019-08-23 15:07 評論0 收藏0
根據調試工具看Vue源碼之組件通信（一）

摘要：根據調試工具看源碼之組件通信一根據調試工具看源碼之組件通信一在平時的業務開發中，相信在座的各位沒少用過組件通信。看完本文可以幫助你了解組件的通信方式及原理，從而進一步加深對的理解，遠離工程師的行列。根據調試工具看Vue源碼之組件通信（一）## 根據調試工具看Vue源碼之組件通信（一）在平時的業務開發中，相信在座的各位沒少用過組件通信。然而，對于一些新手/業務熟手來說，不懂技術原理往...

付倫 2019-08-23 15:30 評論0 收藏0
看一下從 new Vue()開始到頁面看到真實dom都經歷了什么？

摘要：從開始看運行流程本篇文章不會具體分析很多每個方法內部具體邏輯，只為了研究一下瀏覽器加載文件后以及我后，都調用了哪些方法，這些方法都是做什么的等等。從 new Vue()開始看vue運行流程本篇文章不會具體分析很多每個方法內部具體邏輯，只為了研究一下瀏覽器加載vuejs文件后以及我new Vue后，都調用了哪些方法，這些方法都是做什么的等等。以便對vue的執行流程有個大致了解，方便遇...

hiyayiji 2019-08-22 18:14 評論0 收藏0
4月份前端資源分享

摘要：更多資源請文章轉自月份前端資源分享關于的思考一款有趣的動畫效果跨站資源共享之二最流行的編程語言能做什么到底什么是閉包的第三個參數跨域資源共享詳解阮一峰前端要給力之語句在中的值周愛民中國第二屆視頻花絮編碼規范前端工程師手冊奇舞周刊被忽視的更多資源請Star：https://github.com/maidishike... 文章轉自：https://github.com/jsfron...

jsdt 2019-08-20 15:54 評論0 收藏0
根據調試工具看Vue源碼之computed（一）

摘要：官方定義類型詳細計算屬性將被混入到實例中。所有和的上下文自動地綁定為實例計算屬性的結果會被緩存，除非依賴的響應式屬性變化才會重新計算。注意，如果某個依賴比如非響應式屬性在該實例范疇之外，則計算屬性是不會被更新的。官方定義類型：{ [key: string]: Function | { get: Function, set: Function } } 詳細：計算屬性將被混入到 V...

aisuhua 2019-08-26 13:34 評論0 收藏0