Vue數(shù)據(jù)雙向綁定底層實(shí)現(xiàn)原理
更新時(shí)間：2019年11月22日 08:36:12 作者：why_Because
這篇文章主要為大家詳細(xì)介紹了Vue數(shù)據(jù)雙向綁定底層實(shí)現(xiàn)原理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
簡(jiǎn)介：
Vue 最獨(dú)特的特性之一，是其非侵入性的響應(yīng)式系統(tǒng)。數(shù)據(jù)模型僅僅是普通的 JavaScript 對(duì)象。而當(dāng)你修改它們時(shí)，視圖會(huì)進(jìn)行更新。簡(jiǎn)單的說，就是數(shù)據(jù)變視圖變。
當(dāng)你把一個(gè)普通的 JavaScript 對(duì)象傳給 Vue 實(shí)例的 data 選項(xiàng)，Vue 將遍歷此對(duì)象所有的屬性，并使用 Object.defineProperty 把這些屬性全部轉(zhuǎn)為 getter/setter。Object.defineProperty 是 ES5 中一個(gè)無法 shim 的特性，這也就是為什么 Vue 不支持 IE8 以及更低版本瀏覽器。
下例為模擬，Vue數(shù)據(jù)雙向綁定底層實(shí)現(xiàn)原理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>數(shù)據(jù)雙向綁定底層實(shí)現(xiàn)</title>
</head>
<body>
<button onclick="changeTest()">點(diǎn)我改變</button>
<div id="test">哈哈哈</div>
<script>
let test={};
let middle='';
Object.defineProperty(test,'name',{
set(val){
console.log('觸發(fā)setter');//設(shè)置、修改時(shí)觸發(fā)set
middle=val;
watcher();
},
get(){
console.log('觸發(fā)geter');//獲取、使用時(shí)觸發(fā)get
return middle;
}
})
function changeTest(){
test.name="變變變";//觸發(fā)setter
}
function watcher(){
document.getElementById('test').innerHTML=test.name;//觸發(fā)get
}
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
淺談Vue開發(fā)人員的7個(gè)最好的VSCode擴(kuò)展
這篇文章主要介紹了淺談Vue開發(fā)人員的7個(gè)最好的VSCode擴(kuò)展，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
vue3項(xiàng)目配置按需自動(dòng)引入自定義組件unplugin-vue-components方式
這篇文章主要介紹了vue3項(xiàng)目配置按需自動(dòng)引入自定義組件unplugin-vue-components方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
組件是可以在自己的模板中調(diào)用自身的,不過他們只能通過name選項(xiàng)來做這件事,下面這篇文章主要給大家介紹了關(guān)于vue3遞歸組件封裝的相關(guān)資料,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了Vue SPA首屏加載緩慢問題解決方案，首屏?xí)r間（First Contentful Paint），指的是瀏覽器從響應(yīng)用戶輸入網(wǎng)址地址，到首屏內(nèi)容渲染完成的時(shí)間，此時(shí)整個(gè)網(wǎng)頁不一定要全部渲染完成，但需要展示當(dāng)前視窗需要的內(nèi)容2023-03-03
這篇文章主要介紹了Vue路由切換時(shí)的左滑和右滑效果,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
在Vue.js開發(fā)中,經(jīng)常會(huì)遇到需要展示搜索和列表的需求,為了提高代碼復(fù)用性和開發(fā)效率,我們可以封裝一個(gè)可配置的搜索列表組件,下面我們就來講講如何實(shí)現(xiàn)這樣一個(gè)組件吧2023-08-08
Vue ECharts設(shè)置主題實(shí)現(xiàn)方法介紹
這篇文章主要介紹了Vue ECharts設(shè)置主題，本文通過實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue如何通過params和query傳值(刷新不丟失)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
使用vite創(chuàng)建vue3之vite.config.js的配置方式
這篇文章主要介紹了使用vite創(chuàng)建vue3之vite.config.js的配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要給大家介紹了關(guān)于vue3中如何使用d3.js繪制流程圖的相關(guān)資料,D3.js是由javaScript語言編寫繪圖庫,其原理是通過調(diào)用一系列內(nèi)置函數(shù),生成SVG,并在網(wǎng)頁渲染,需要的朋友可以參考下2023-10-10