我決定每周都寫一點技術的博客抬闯,但是一開始真的不知道要寫什么浑塞〗部玻或許也是自己的水平?jīng)]有到能想到一個什么很有意思的話題去寫吧孕惜。
那么我初期的博客就圍繞著別人的博客,然后寫上自己的發(fā)散和筆記吧晨炕。
原文-面試題:你能寫一個Vue的雙向數(shù)據(jù)綁定嗎衫画?
詳細版
文中說不對Vue中的雙向綁定的原理做過多解釋了,但是我好像根本就不怎么了解也瓮栗。所以削罩,第一部分還是自己總結一下雙向綁定的原理吧。
雙向綁定實現(xiàn)的原理
剛看了一遍別人的博客费奸,腦袋有點暈弥激。媽的。再理理愿阐。
實現(xiàn)的最基本的思路是做到數(shù)據(jù)的監(jiān)聽微服。數(shù)據(jù)的劫持,在MVVM框架中缨历,做到data層和view層的數(shù)據(jù)劫持以蕴。對于view層數(shù)改動,是很容易監(jiān)聽的辛孵。畢竟JS中的監(jiān)聽器就是專門做這個的舒裤。重點在于數(shù)據(jù)層的更改怎么和view層的更新的。
這個地方用到的就是Object.definePropert()觉吭。這個方法接受三個參數(shù),第一個是目標對象仆邓,第二個是對象的屬性名鲜滩,第三個是針對該屬性的描述伴鳖。
var Book = {}
var name = ''
Object.defineProperty(Book,'name',{
set:function(value){name = value; console.log('you named a book '+name)},
get:function(){return '\<'+name+'\>'}
})
Book.name = 'yoyi'//you named a book yoyi
Book.name //"<yoyi>"
在描述里面就可以對set和get進行監(jiān)聽,雙向綁定的最基本的思路就是這樣實現(xiàn)的徙硅。接下來榜聂,怎么做的,繼續(xù)看吧嗓蘑。