Vue雙向資料繫結的理解
一、什麼是MVVM框架
所謂MVVM,是Model - View - ViewModel 的簡寫。
我的理解是
頁面上所看到的就是View。
使用Vue.js或者是其他MVVM框架,是在操作ViewModel,實現View - ViewModel的雙向互動。
然後Model就是伺服器的資源,ViewMdoel從伺服器請求資料,或者傳送資料給伺服器,就是ViewModel - Model的雙向互動。
二、雙向資料繫結的原理
雙向資料繫結,雙向指的是兩個方向。
一是資料驅動頁面,
二是頁面改動了,會響應式的改變繫結的資料。主要是input的變動。
繫結說的是MVVM框架,自動的去完成資料的改動,頁面的渲染。
不像以前,改變頁面上的一個值,要先去獲取該元素的節點,然後再去設定它的文字內容(比如innerHTML屬性)。
那麼更具體的講,具體實現主要使用的是,或者說細節是:
1.Object.defineProperty屬性。這是MVVM框架的核心API。
2.觀察者設計模式
利用Object.defineProperty這個API實現了對Data每個屬性的監聽和回撥。
資料驅動頁面方向:就是當去修改Data某一個屬性時,會通知觀察者,然後觀察者觸發自身的回撥函式,進而重新渲染頁面。
頁面 =》 資料:其實就是去監聽input的oninput事件。oninput事件會去修改對應的Data的屬性值。
三、淺談Vue框架實現響應式的原理。
前面說過,雙向資料繫結的核心是Object.definePrototype這個API,Vue的響應式主要做了四方面的工作。
1.通過Object.definePrototype,劫持了Vue例項物件中的data屬性下的每一個值,並設定了相應的getter和setter。
2.實現了一個compile解析器,將Vue例項物件的el屬性掛載的DOM節點下的所有節點進行解析。類似於全部銷燬,然後建立一個文件碎片fragment,將識別到的特殊的節點做特殊處理,在放入文件碎片fragment中,最後再講文件碎片fragment放進根節點,也就是掛載的元素中。
3.實現了一個觀察者watcher,自身有一個updata方法,當資料修改的時候,就會通知觀察者呼叫updata方法,去將相應節點的textContent更新。
4.實現了一個訊息訂閱器Dep,用來接收觀察者的訂閱,並在資料修改時通知觀察者。
那麼以上觀察者如何在Dep中訂閱訊息,怎麼實現這是一個難點。
簡單的說,我的理解。
參考了一篇文章,
比如當compile解析器解析到{{message}}這樣子的文字節點的時候,就可以認為這個地方綁定了一個變數,就可以例項化一個觀察者。看到觀察者的程式碼,
/*
變數的含義:
vm:Vue例項物件
node:變數所在的文字節點(就是{{message}})
name:繫結的變數名(就是message)
*/
function Watcher(vm,node,name){
//讓全域性變數Dep的target屬性的指標指向該watcher例項
Dep.target = this;
this.vm = vm;
this.node = node;
this.name = name;
//放入Dep.target才能update()?????????????????????????????????????????
this.update();
Dep.target = null;
}
// 觀察者使用update方法,實際上是
Watcher.prototype = {
update: function(){
this.get();
this.node.nodeValue = this.value;
},
//獲取data中的屬性值
get: function(){
this.value = this.vm[this.name]; //觸發相應屬性的get
}
}
然後在getter中這樣定義 get: function(){
//Dep.target指標指向watcher,增加訂閱者watcher到主體物件Dep
if(Dep.target){
dep.addSub(Dep.target);
}
return val;
因為在例項化watcher的時候,會執行watcher的updata方法,updata方法中又執行了watcher的get方法,get方法會訪問到message屬性,觸發對應的getter,就會往訂閱器Dep中新增watcher。相關推薦
Vue雙向資料繫結的理解
一、什麼是MVVM框架 所謂MVVM,是Model - View - ViewModel 的簡寫。 我的理解是頁面上所看到的就是View。 使用Vue.js或者是其他MVVM框架,是在操作ViewModel,實現View - ViewModel的雙向互動。 然後Mod
vue 雙向資料繫結的實現學習(二)- 監聽器的實現
廢話:上一篇https://www.cnblogs.com/adouwt/p/9928278.html 提到了vue實現的基本實現原理:Object.defineProperty() -資料劫持 和 釋出訂閱者模式(觀察者),下面講的就是資料劫持在程式碼中的具體實現。 1.先看如何呼
vue雙向資料繫結的實現
總所周知,偵測一個物件變化的方法,常用的兩種是Object.defineProperty,和es6的proxy,下面就基於Object.defineProperty實現簡單的雙向繫結 其實vue主要是通過Object.defineProperty實現的,至於vue3.0會不會重寫
模擬Vue雙向資料繫結
事件物件 function EventEmit(){ // { // "message":['事件1','事件2'] // } this.callbacks={} } EventEmit.prototype.on=function(eventNa
Vue 雙向資料繫結實現
<!DOCTYPE html> <html> <head> <title>myVue</title> <style> #app{ text-align: center;
詳解 vue 雙向資料繫結的原理,並實現一組雙向資料繫結
1:vue 雙向資料繫結的原理: Object.defineProperty是ES5新增的一個API,其作用是給物件的屬性增加更多的控制Object.defineProperty(obj, prop, descriptor)引數 obj: 需要定義屬性的物件(目標物件)prop: 需被定義或修改的屬性名(物
vue雙向資料繫結原理
Vue應用的是mvvm框架,view和model分離,然後通過vm雙向資料繫結,` <code class="hljs handlebars has-numbering" style="display: block; padding: 0px; color: inh
vue雙向資料繫結的原理
有關雙向資料繫結的原理 最近兩次面試的時候,被問到了vue中雙向資料繫結的原理,因為初學不精,只是使用而沒有深入研究,所以答不出來。之後就在網上查找了別人寫的部落格,學習一下。 下面是部落格園一篇部落格,以及MDN上講解Object.defineProper
vue 雙向資料繫結原理
Vue的雙向資料繫結原理是什麼?vue.js是採用資料劫持結合釋出者-訂閱者模式的方式,通過Object.defineProperty()來劫持各個屬性的setter, getter,在資料變動時釋出訊息給訂閱者,出發相應的監聽回撥。具體步驟:首先Vue會使用document
Vue雙向資料繫結原理解析
首先上原始碼,模擬vue的雙向資料繫結原理<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Two-way data-
簡要理解vue的mvvm模式中的雙向資料繫結
mvvm(Model-View-ViewModel)模式: 由檢視(View)、檢視模型(ViewModel)、模型(Model)三部分組成,結構如下圖。 通過這三部分實現UI邏輯、呈現邏輯和狀態控制、資料與業務邏輯的分離。 使用MVVM模式有幾大好處
面試題:你能寫一個Vue的雙向資料繫結嗎?
在目前的前端面試中,vue的雙向資料繫結已經成為了一個非常容易考到的點,即使不能當場寫出來,至少也要能說出原理。本篇文章中我將會仿照vue寫一個雙向資料繫結的例項,名字就叫myVue吧。結合註釋,希望能讓大家有所收穫。 1、原理 Vue的雙向資料繫結的原理相信大家也都十分了解了,主要是通過 Obje
轉 vue實現雙向資料繫結之原理及實現篇 vue的雙向繫結原理及實現
轉自:canfoo#! vue的雙向繫結原理及實現 前言 先上個成果圖來吸引各位: 程式碼: &nb
Vue 框架-03-鍵盤事件、健值修飾符、雙向資料繫結
Vue 框架-03-鍵盤時間及健值修飾符 一、鍵盤事件,當按鍵盤時,在控制檯輸出提示 html 原始碼: <!DOCTYPE html> <html> <head> <meta charset="utf-8" />
Vue學習(3)————————繫結Class繫結Style,雙向資料繫結,dom節點
標籤內繫結屬性(此功能看來可以動態繫結標籤屬性) <template> <div id="app"> <div v-bind:title="title"> 滑鼠走一走 </div> </div> </temp
Vue學習(三)——屬性繫結和雙向資料繫結
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>屬性繫結和雙向資料繫結</title> <script src="./v
簡單實現VUE的雙向資料繫結
<!DOCTYPE html> <html> <head> <title>vue-雙向資料繫結的簡單實現</title> </head> <body> <input type="text" name="" id
vue.js v-model雙向資料繫結, vue.js form表單資料繫結
vue.js v-model雙向資料繫結, vue.js form表單資料繫結 ================================ ©Copyright 蕃薯耀 2018年11月29日 http://fanshuyao.iteye.com/ &l
vue指令v-model(雙向資料繫結)自動收集資料
前言:表單提交資料在網站頁面中是十分常見的,而這個表單資料的獲取在原生寫法甚至於JQ都是比較麻煩的(首先需要獲取DOM,然後獲取值)。 但是,在vue的專案環境下,表單資料的收集又該怎麼辦呢?(這種自己寫input元素的方法在實際專案中是不常用的哈,因為一般我們都會用一個UI庫,方便而快捷!
vue.js和angular雙向資料繫結的實現原理
一、vue雙向資料繫結 1、原理 資料劫持: vue.js 是採用資料劫持結合釋出者-訂閱者模式的方式,通過Object.defineProperty()來劫持各個屬性的setter,getter,在資料變動時釋出訊息給訂閱者,觸發相應的監聽回撥。 2、實現步驟 要實現mv