根據(jù)調(diào)試工具看Vue源碼之watch

monw3c 發(fā)布于2019-08-23 16:20 / 1358人閱讀

摘要：實(shí)例將會(huì)在實(shí)例化時(shí)調(diào)用，遍歷對(duì)象的每一個(gè)屬性。我們期待的是斷點(diǎn)停下后，調(diào)用棧中出現(xiàn)相關(guān)的函數(shù)，提供我們分析原理的依據(jù)。抱著上面的意圖以及期待，我們新建一個(gè)項(xiàng)目，同時(shí)寫(xiě)入以下代碼刷新頁(yè)面后右邊的調(diào)用棧顯示如下

官方定義

類(lèi)型：{ [key: string]: string | Function | Object | Array }

詳細(xì)：

一個(gè)對(duì)象，鍵是需要觀察的表達(dá)式，值是對(duì)應(yīng)回調(diào)函數(shù)。值也可以是方法名，或者包含選項(xiàng)的對(duì)象。Vue 實(shí)例將會(huì)在實(shí)例化時(shí)調(diào)用 $watch()，遍歷 watch 對(duì)象的每一個(gè)屬性。

初次探索

我們的意圖是 —— 監(jiān)測(cè)app這個(gè)變量，并在函數(shù)中打下一個(gè)斷點(diǎn)。
我們期待的是 —— 斷點(diǎn)停下后，調(diào)用棧中出現(xiàn)相關(guān)的函數(shù)，提供我們分析watch原理的依據(jù)。

抱著上面的意圖以及期待，我們新建一個(gè)Vue項(xiàng)目，同時(shí)寫(xiě)入以下代碼：

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

刷新頁(yè)面后右邊的調(diào)用棧顯示如下

GPU云服務(wù)器云服務(wù)器看動(dòng)畫(huà)學(xué)算法之:hashtable vue源碼 vue webrtc 源碼源碼中文說(shuō)明之

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102914.html

相關(guān)文章

根據(jù)調(diào)試工具看Vue源碼之生命周期（一）

摘要：由于工作中經(jīng)常使用調(diào)試工具來(lái)定位問(wèn)題，覺(jué)著這東西真的挺好用。突然有一天受到啟發(fā)，想著我學(xué)習(xí)源碼是否也可以通過(guò)調(diào)試工具呢因此，誕生了這篇文章來(lái)記錄我的一些學(xué)習(xí)成果，后續(xù)應(yīng)該會(huì)寫(xiě)成一個(gè)系列。由于工作中經(jīng)常使用chrome調(diào)試工具來(lái)定位問(wèn)題，覺(jué)著這東西真的挺好用。突然有一天受到啟發(fā)，想著：我學(xué)習(xí)源碼是否也可以通過(guò)調(diào)試工具呢？因此，誕生了這篇文章來(lái)記錄我的一些學(xué)習(xí)成果，后續(xù)應(yīng)該會(huì)寫(xiě)成一個(gè)...

My_Oh_My 2019-08-23 15:07 評(píng)論0 收藏0
根據(jù)調(diào)試工具看Vue源碼之組件通信（一）

摘要：根據(jù)調(diào)試工具看源碼之組件通信一根據(jù)調(diào)試工具看源碼之組件通信一在平時(shí)的業(yè)務(wù)開(kāi)發(fā)中，相信在座的各位沒(méi)少用過(guò)組件通信?？赐瓯疚目梢詭椭懔私饨M件的通信方式及原理，從而進(jìn)一步加深對(duì)的理解，遠(yuǎn)離工程師的行列。根據(jù)調(diào)試工具看Vue源碼之組件通信（一）## 根據(jù)調(diào)試工具看Vue源碼之組件通信（一）在平時(shí)的業(yè)務(wù)開(kāi)發(fā)中，相信在座的各位沒(méi)少用過(guò)組件通信。然而，對(duì)于一些新手/業(yè)務(wù)熟手來(lái)說(shuō)，不懂技術(shù)原理往...

付倫 2019-08-23 15:30 評(píng)論0 收藏0
看一下從 new Vue()開(kāi)始到頁(yè)面看到真實(shí)dom都經(jīng)歷了什么？

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

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

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

jsdt 2019-08-20 15:54 評(píng)論0 收藏0
根據(jù)調(diào)試工具看Vue源碼之computed（一）

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

aisuhua 2019-08-26 13:34 評(píng)論0 收藏0