vue資料繫結原理

2021-09-20 02:25:55 字數 991 閱讀 7054

}

}

// var title = "hello";

// var num = 10;

// vue中資料繫結是通過set,get屬性實現的,

// 所以不支援es5的瀏覽器就不能甩vue

// 在元件配置物件中的data中的資料,在元件建立時,都會被作為set,get屬性新增到元件物件上,在set方法中進行了元件的重新渲染,所以每當data中的資料發生變化,頁面就會立刻重新渲染。

function

initattr

(),

get()

})

object

.defineproperty

(window

,"num",,

get()

})}

initattr

();

varsourcebody

=document

.body

.innerhtml;

function

render

() \}/g

; let

content

=sourcebody;

letarr;

while

(arr

=reg

.exec

(content

)) ;

document

.body

.innerhtml

=content;

// content.replace(reg,)

}

render

();

title

="hello";

num=10

; settimeout

(()

=>

, 2000);

<

/script>

vue雙向資料繫結原理

vue應用的是mvvm框架,view和model分離,然後通過vm雙向資料繫結,div 原生物件即資料 var data 建立乙個 viewmodel 例項 var vm new vue 然而乙個動態資料的繫結,是怎麼實現的呢,首先vue利用es5的defineproperty方法裡的get,set...

vue雙向資料繫結原理

text id text show p var text document.getelementbyid text show document.getelementbyid show var model object.defineproperty model,name set function ne...

vue資料雙向繫結原理

vue的資料雙向繫結的小例子 html index.js function selfvue data,el,exp 對data的每一層級的屬性進行監聽,如果變化執行notify observe data 初始化模板資料的值 el.innerhtml this data exp new watcher...