Vue原始碼學習筆記

最近偷懶好久沒有寫部落格了，一直想繼續vue學習系列，想深入vue原始碼來寫。結果發現自己層次不夠，對js的理解差好多。所以一直想寫一直擱置著。最近重新振作決心看完vue原始碼，並且以我們這類前端小白的角度來一步步弄懂vue原始碼。

vue.js 本質上就是乙個包含各種邏輯的乙個function。而我們通常初始化vue的過程就是例項化的過程。

var vm = new vue({})

話不多說，老規矩用**說話！

讓我們來對vue進行列印：

var vm = new vue()
console.log(vue)
console.log(vm)

列印結果如圖：

這裡可以看到vue3這

個方法，

就是這個

方法對v

ue物件

的構造函

數了。其

實這很簡

單，我們

自己都可

以造出一

個vue

function vue$4(options) 
vue$4.prototype.name = "小東西"
vue$4.prototype.age = 27
console.log(new vue$4("很好"))

顯示結果如圖

綜上所述，vue物件的本質就是乙個function，與我們的vue$4的不同之處只在於邏輯的多與少。

在vue的原始碼中，出場率最多的應該就數object物件的使用上了。可以這麼說，不懂object都沒法往下看**。以下是原始碼中用到的比較多的。

那麼，vue中哪個是object呢？我們繼續試驗：

console.log(typeof vue)
console.log(typeof
new vue())

輸出結果

function object

結果顯示，使用new來建立的vue例項就是個物件，所以一切對object的操作行為都是針對vue例項物件的。

vue無非就是setter和getter方法的運用而已

這讓我等新手一臉懵逼，這裡我們就來認識認識setter和getter。

當我們在獲取乙個vue例項data中的某個物件，如果你用console列印出來會發現，物件屬性中除了常規的物件屬性和proto物件之外還會多乙個set和乙個get方法，所謂的setter和getter就是它們。vue給每乙個物件屬性都新增了observer觀察資料的獲取和修改。好吧，貼**一睹真容。

function
definereactive
(  obj,
key,
val,
customsetter,
shallow
)   // cater for pre-defined getter/setters
var getter = property && property.get;
var setter = property && property.set;
var childob = !shallow && observe(val);
object.defineproperty(obj, key, }}
return value
},set: function
reactivesetter
(newval) 
/* eslint-enable no-self-compare */
if ("development" !== 'production' && customsetter) 
if (setter)  else 
childob = !shallow && observe(newval);
dep.notify();
}});
}

**太長？懵逼了？沒關係，我們自己來造乙個簡單的setter和getter來了解一下。

其實用的就是object.defineproperty方法中就有set和get。

好了，寫**~

var obj = {}
var mvalue = "abc"
object.defineproperty(obj, "_name", ,
set: function
reactivesetter
(val) 
})obj._name = "rose"
console.log(obj)

到這裡我們列印log，物件屬性的set和get方法就出現了。

在原始碼中有很多邏輯運算子的使用，有些運用的很巧妙。這裡也科普下吧~

首先知道下可以轉換成false的值，如下：

* null

* nan

* 0

* 空字串（」「）

* undefined

這是最基本的用法。

if (a & a.master & a.master.name) {} // 如果這三個屬性都為true值，執行if邏輯
if (a || b) {} // 如果a或者b為true值，執行if邏輯。

var getter = property && property.get;  // 如果兩個屬性都存在，將property.get賦值給getter
e && e.__ob__ && e.__ob__.dep.depend(); // 如果三個屬性都存在，執行第三條語句的方法
var res = assets[id] || assets[camelizedid] || assets[pascalcaseid]; 
// 給res賦值，如果assets[id]為true，則將其傳res；
// 如果assets[camelizedid]為true，將其傳給res；
// 如果前兩者都為false，將assets[pascalcaseid]傳給res。
var strat = strats[key] || defaultstrat;

兩個感嘆號會確保引數為非值時只能為false，不會是0、空字串、undefined等非值。

if (options)  else

還在學習vue原始碼中……看了很多文章、也看了一遍原始碼。內容太多，千頭萬緒，容我理清之後，用自己的文字把vue的原始碼學習記錄分享出來。一些值得記錄下來的知識點和心得會繼續在本文中更新。

最後，想學習vue原始碼的同學可以去買《vue.js權威指南》這本書，雖然許多章節內容和官網是重複的，不過原始碼解析部分值得一看。我也正配合著這本書和原始碼在學習vue。

vue原始碼學習筆記

最近在看vue的原始碼，因為本人比較小白，所以很多地方理解起來會有一定難度，好在有很多大分享了vue原始碼相關的文章，整理一下吧 vue.js 原始碼學習筆記囧克斯，這篇文章是老師推薦的，裡面總結了vue原始碼中比較值得關注的地方，不過文章應該寫的比較早了，文中講的vue是以前的版本，檔案結構會和...

vue原始碼學習

new vue發生了什麼此處只針對最簡單基礎的new vue過程，一般專案中採用.vue單檔案元件的形式開發，下面會介紹對於 runtime compile 版本初始化乙個 vue 例項的一系列相關環境 watcher，lifecycle,methods等等 compile 將 templat...

vue原始碼學習 vm forceUpdate方法

vue原始碼版本為2.6.11 cdn位址為如何實現的？只需要執行watcher的update方法，就可以讓例項重新渲染。vue.js的每乙個例項都有乙個watcher。當狀態發生改變時，會通知到元件級別，然後元件內部使用虛擬dom進行更詳細的重新渲染操作。事實上，元件就是vue.js例項，所以元...

Vue原始碼學習筆記

vue原始碼學習筆記

vue原始碼學習

vue原始碼學習 vm forceUpdate方法

相關推薦