初學Vue之雙向綁定

我決定每周都寫一點技術的博客抬闯,但是一開始真的不知道要寫什么浑塞〗部玻或許也是自己的水平?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ù)看吧嗓蘑。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末须肆,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子桩皿,更是在濱河造成了極大的恐慌豌汇,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件泄隔,死亡現(xiàn)場離奇詭異拒贱,居然都是意外死亡,警方通過查閱死者的電腦和手機佛嬉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進店門逻澳,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人暖呕,你說我怎么就攤上這事斜做。” “怎么了湾揽?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵瓤逼,是天一觀的道長。 經(jīng)常有香客問我钝腺,道長抛姑,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任艳狐,我火速辦了婚禮定硝,結果婚禮上,老公的妹妹穿的比我還像新娘毫目。我一直安慰自己蔬啡,他們只是感情好,可當我...
    茶點故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布镀虐。 她就那樣靜靜地躺著箱蟆,像睡著了一般。 火紅的嫁衣襯著肌膚如雪刮便。 梳的紋絲不亂的頭發(fā)上空猜,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天,我揣著相機與錄音,去河邊找鬼辈毯。 笑死坝疼,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的谆沃。 我是一名探鬼主播钝凶,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼唁影!你這毒婦竟也來了耕陷?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤据沈,失蹤者是張志新(化名)和其女友劉穎哟沫,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體卓舵,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡南用,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了掏湾。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片裹虫。...
    茶點故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖融击,靈堂內(nèi)的尸體忽然破棺而出筑公,到底是詐尸還是另有隱情,我是刑警寧澤尊浪,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布匣屡,位于F島的核電站,受9級特大地震影響拇涤,放射性物質(zhì)發(fā)生泄漏捣作。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一鹅士、第九天 我趴在偏房一處隱蔽的房頂上張望券躁。 院中可真熱鬧,春花似錦掉盅、人聲如沸也拜。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽慢哈。三九已至,卻和暖如春永票,著一層夾襖步出監(jiān)牢的瞬間卵贱,已是汗流浹背滥沫。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留艰赞,地道東北人佣谐。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像方妖,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子罚攀,可洞房花燭夜當晚...
    茶點故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內(nèi)容