vue原始碼分析1

2021-09-24 02:39:03 字數 1259 閱讀 5766

在vue的原始碼中使用的是es5的方法 .prototype.slice.bind(obj) 來實現的

例如:

已**為例:

obj: 定義屬性的物件

prop: 定義或修改屬性的名稱

descriptor: 將被定義或修改的屬性描述符

value: 預設值

configurable:  是否可以重新定義

enumerable: 是否可以列舉

writable: 是否可以寫或者更改

get: 動態計算讀取當前屬性的值

set: 監視屬性值的變化,更新其他相關屬性

const obj = 

object.defineproperty(obj, 'fullname', ,

set:function(value)

}) console.log(obj.fullname) // 1~2

obj.firstname = 3

obj.lastname = 4

console.log(obj.fullname) // 3~4

obj.fullname = 5~7

console.log(obj.firstname) // 5

console.log(obj.lastname) // 7

vue的計算屬性就是運用了該語法

該語法ie8不支援,所以vue不支援ie8

obj: 要遍歷的物件

**如下

const obj = 

const arr = object.keys(obj)

console.log(arr) //  ["firstname", "lastname"]

vue中的v-for就是用該語法來遍歷的

判斷prop是否為自身的屬性

const obj = 

console.log(obj.hasownproperty('fullname')) // true

console.log(obj.hasownproperty('tostring')) // false

tostring()是物件原型的方法, 不是自身屬性

高效一次批量更新多個節點,提高效能

此時顯示的應該是fragment而不是1, 2, 3

Vue原始碼分析

在開始原始碼分析工作之前,我們在當前篇章做好相應的準備工作,以便更好地展開分析。將原始碼fork到自己的github倉庫中 git clone 自己的github vue 位址 dist 打包之後的結果 examples 示例 src compiler 編譯相關 core vue 核心庫 compo...

Vue原始碼分析(流程分析)

使用步驟 1.編寫 頁面 模板 1.直接在html標籤中寫 2.使用template 3.使用單檔案 2.建立vue例項 1.在vue 的建構函式中 data,methods,computer,watcher,props,3.將vue掛載到頁面中 mount 資料驅動模型 vue執行流程 1.獲得模...

Vue原始碼主體分析

vue的響應式和react的函式式程式設計思想是很不同的。vue最基本的原理是對getter和setter的 模式。以及觀察者模式。當資料發生變化時,通知觀察者。而watcher是通過觸發資料的getter,成為觀察者的。vue的生命週期中,在create階段,vue建立了例項。在mount 階段,...