根據上圖的概要邏輯，**進行簡單實現
/**
* vue模擬實現
*/class
myvue);
// 4. 建立compile
newcompiler
(this
.$el,
this);
}}// 對vue例項中的data物件進行**
_proxy
(attr)
,get()
})}}
/**
* 觀察者 觀察,監聽
*/class
watcher
getoldval()
update()
}}/** * 發布者
*/class
dep// 新增觀察者
addsub
(watcher)
// 通知觀察者去更新node
notify()
)}}/**
* observer 監視資料變化
*/class
observer
observe
(data))}
}// 監視資料 object.defineproperty
definereactive
(obj, key, value)
return value;},
set:
(newvalue)
=>
value = newvalue;
dep.
notify()
;}})
}}
/**
* 1.編譯dom, 初始化賦值
* 2.新建watcher
*/class
compiler
// 建立片段
_createfragment()
return frag;
}// 編譯模板, 匹配dom和watcher
_compile
(fragment)
if(commonutils.
istextnode
(childnode)
)// 元素節點的子元素也取出
if(childnode.childnodes && childnode.childnodes.length)})
}// 編譯屬性節點
_compileelement
(node)})
}// 編譯文字節點
_compiletext
(node)
}const content = node.textcontent;
if(commonutils.regex.
test
(content))}
}
// 共通屬性, 方法定義
const commonutils =
\}/g
,// 判斷是dom中元素物件還是字串
iselementnode
(node)
,// 判斷是dom中文字物件還是字串
istextnode
(node)
,// 判斷是否是v-字首開頭
isstartwithvprefix
(attrname)
,// 取出vue data中定義的屬性值
getval
(attrvalue, vm)
,vm);}
,// 取出vue data中定義的屬性值
setval
(attrvalue, vm, inputval)
return result[currentvalue];}
, vm)},
// 為了替換 } -- }
getcontentval
(attrvalue, vm))}
,// 取出文字屬性值
text
(node, attrvalue, vm)
}--}
let temp =
this
; value = attrvalue.
replace
(this
.regex,
function
(target, m1));
return temp.
getval
(m1, vm);}
);}else);
}this
.updater.
textupdater
(node, value);}
,// 取出html屬性值
html
(node, attrvalue, vm));
this
.updater.
htmlupdater
(node, value);}
,// 取出model屬性值
model
(node, attrvalue, vm));
// 檢視 -> 資料 -> 檢視
node.
addeventlistener
("input"
, e =>
)this
.updater.
modelupdater
(node, value);}
, updater:
,htmlupdater
(node, value)
,modelupdater
(node, value)
}}
vue2 x的data響應式原理
proxy 相容性不好，且無法polyfill vue2.x還會存在一段時間 監聽物件，監聽陣列，複雜物件，深度監聽 function definereactive target,key,value set newvalue 深度監聽，需要遞迴到底，一次性計算量大 可能會被卡死 無法監聽新增屬性 刪...
vue2 x 許可權管理實現
由於工作的需求，前後端分離，需要對頁面中的資源許可權控制，到按鈕級別。開發步驟 1 制定 資源的命名規則 系統名 模組名 頁面名 功能名 2 收集各個頁面所有需要管控按鈕的資源，用乙個excel來整理 退出編輯備註 a.v privilege 表示是使用的指令 b.privilegeid 表示資源的...
vue2 x 是怎麼讓普通物件變為 響應式物件的呢
function initdata vm if isplainobject data process.env.node env production warn data functions should return an object n vm proxy data on instance var...