09 仿雙向資料繫結

資料雙向繫結

①  明確： vue 雙向繫結時通過 js object.defineproperty 來實現的

②  特徵：每個 屬性都有 get 和 set 方法

一  、 object.defineproperty

① vue 是通過 js 的 object.defineproperty 來實現資料劫持的，當資料讀寫時分別觸發 get/set 方法

② 語法

object.defineproperty (帶監聽的物件，帶監聽的屬性，,     set(){} })

<

input 
type
="text"
name
=""id
="inputobj"
>
<
script
>
let dataobj = 
//1.攔截資料
let tmpdata;
object.defineproperty(dataobj,
'msg
',,     
set(newdata) }) 
//3.將資料同步到模型 
let inputobj 
=document.queryselector(
'#inputobj
'); 
inputobj.onkeyup 
=() 
=>
script
>

*1- 雙向繫結原理是什麼

答：通過 js 的 object.defineproperty 實現資料的劫持

二 、vue 雙向繫結原理（完整版）

① 核心原理

② **（完整版）

<

div 
id>
<
input 
type
="text"
v-model
="username"
>
}div
>
<
script
>
function
watcher (vm, node, name, nodetype) 
if(this
.nodetype =='
input') 
}  dep.target 
=this;}
function
dep () ,
this
.notify 
=function
() );
}} //
記錄所有繫結資料的節點
//let watchers = ;
function
observer(vm)
,            set(newvalue)
})})} 
//編譯解析指令
function
compile(node, vm)\}/
g  //
正則匹配頁面指令
//元素節點
if(node.nodetype 
===1
)    );
//-----------------------------
let name 
=attr[i].nodevalue     
//獲取v-model繫結的屬性名
//記錄繫結資料的元素節點
newwatcher(vm, node, name, 
'input')
node.value 
=vm.data[name]       
//將data中的值賦給該節點
node.removeattribute(
'v-model
'); 
//解析完畢不要出現vue指令
}        }
}//如果節點型別為text
if(node.nodetype 
===3
)    )
newwatcher(vm, node, name, 
'text');
node.nodevalue 
=vm.data[name];
}}} 
function
vue(options)
//將documentfragment放到掛載目標中} 
let vm 
=new
vue(
})script
>

09 仿雙向資料繫結

資料雙向繫結 明確 vue 雙向繫結時通過 js object.defineproperty 來實現的 特徵 每個 屬性都有 get 和 set 方法 一 object.defineproperty vue 是通過 js 的 object.defineproperty 來實現資料劫持的，當資料讀寫時...

雙向資料繫結

2 mvvm 2.總結mvvm 二 vue 2 實現mvvm主要包含兩個方面，資料變化更新檢視，檢視變化更新資料 最近面試時老被問到雙向資料繫結。明明概念看了好幾遍，也總結了好幾次，但是還是被問住 參考文章 很欣賞這篇部落格作者的一句話，再長的路，一步步也能走完。再短的路，不邁開雙腳也無法到達。送給...

雙向資料繫結

雙向資料繫結基於mvvm框架，vue屬於mvvm框架 mvvm m等於model，v等於view，即model改變影響view，view改變影響model 1.雙向資料繫結 必須在使用在表單裡面 使用v model繫結資料，實現動態資料變化 js export default 獲取動態資料 獲取表單...