Vue原理 簡言

2021-10-20 10:37:57 字數 1062 閱讀 8689

vue

template 編譯 render function vnode 虛擬dom

react

jsx render function vnode 虛擬dom

vue相當於react,angular更綜合一點。angular js則使用了『髒值檢測』。

react則採用避免直接操作dom的虛擬dom樹,而vue則採用的是object.defineproperty特性

vue可以說是尤雨溪從angular中提煉出來的,又參考了react的效能思路,而集打成的一種輕量級、高效、靈活的框架

通過建立虛擬dom樹document.createdocumentfragment(),方法建立虛擬dom樹。

一旦被檢測的資料改變,會通過object.defineproperty定義的資料攔截,擷取到資料的變化。

擷取到的資料變化,從而通過訂閱-發布者模式,觸發watcher,從而改變虛擬dom中的具體資料

最後,通過更新虛擬dom的元素值,從而改變最後渲染dom樹的值,完成雙向繫結

vue的模式是mvvm,通過modelview 作為中間層,進行資料的繫結與變化

object.defineproperty和訂閱-發布者模式這兩點

首先,我們把注意力集中在這個屬性上:object.defineproperty

object.defineproperty(obj, prop, descriptor)方法會直接在乙個物件上定義乙個新屬性,或者修改乙個物件的現有屬性,並返回這個物件。語法:object.defineproperty(obj, prop, descriptor)

什麼叫做,定義或修改乙個物件的新屬性,並返回這個物件呢?

var obj = {};

object.defineproperty(obj, 'hello', ,

set: function(newvalue)

})obj.hello

obj.hello = 'new hello'

ConcurrentHashMap 原理簡要分析

在之前寫過hashtable 與hashmap 兩者之間的異同 通過前面文章,可以知道hashmap 中未進行同步考慮,而 hashtable 則使用了 synchronized 帶來的直接影響就是可選擇,我們可以在單執行緒時使用 hashmap 提高效率,而多執行緒時用 hashtable 來保證...

簡言C語言使用技巧之條件編譯

第一種 define test no1 ifdef test no1 printf test no1被定義的話,就打出這行字 else printf else 可以省略 endif上面這種的用法是,如果識別符號被定義了,那麼就編譯第一段,否則就編譯第二段。第二種 ifndef test no2 pr...

普歌 雲言團隊 Request物件簡析

request定義 request物件是servlet中service的乙個引數,當瀏覽器發出請求時,伺服器會自動建立乙個reques物件,用來封裝請求資料,然後在servlet中呼叫service方法時,將request物件依次傳遞到各個servlet,請求資料進行處理。request的使用 1,...