09 仿雙向資料繫結

2021-10-03 08:19:32 字數 2477 閱讀 8139

資料雙向繫結

①  明確: 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 獲取動態資料 獲取表單...