vue的整個實現流程

2021-10-23 06:37:34 字數 1709 閱讀 2437

vue實現流程有以下4個步驟

1. 解析模板成render函式

模板如下:

解析成render函式(原始碼中使用code.render)

格式化後如下:thisvue例項,_c為例項的函式,對應createelement,返回vnode

收縮後如下:

模板中的所有資訊被render函式包含,模板中用到的data中的屬性,都變成了js變數,模板中的v-model v-for v-on都變成了js邏輯,render函式返回vnode.

2. 響應式開始監聽使用object.defineproperty將data的屬性**到vm上。

3.首次渲染,顯示頁面,繫結依賴

1.初次渲染,執行updatecomponent,執行vm._render(),執行render函式,會訪問到vm.list vm.title,會被響應式的get方法監聽到。

2. 執行updatecomponent,執行vdompatch方法,將vnode渲染成dom,初次渲染完成。

監聽get的原因,是為了避免不必要的重複渲染,data中只有觸發get的才會被使用到。

4. data屬性變化,觸發rerender

修改屬性,被響應式的set監聽到,set中執行updatecomponent,重新執行vm._render,生成vnodeprevvnode,通過patch進行對比,渲染到html

coturn整個流程

1 通過4個協議互動 allocate 帶上使用者名稱和密碼在coturn註冊上該使用者資訊,建立客戶端傳送護具的udp埠。createpermission 在coturn上建立需要透傳的ip port資訊。send indication 客戶端發資料到coturn,coturn在記憶體中查詢是否有...

XML建模整個流程

一 包名命名規範 網域名稱反寫 專案名稱 模組名稱 例如 二 怎樣去建模呢?1.需要將xml中所有的標籤都要進行建模 有多少個標籤就建多少個實體類 2.在建模時,從裡到外建,原因是外層依賴內層 三 命名規範 forwardmodel 帕斯卡 作用 於類名 forwardmodel 駝峰 作用於 屬性...

簡述MapReduce整個流程

1.由程式的inputformat呼叫recordreader的read 方法讀取外部的資料,返回k,v鍵值對.2.讀取的k,v鍵值對傳送給map 方法,作為其入參來執行使用者定義的map邏輯.3.context.write方法被呼叫時,map 方法的輸出結果會被寫入到環形緩衝區內.4.環形緩衝區其...