Vue數(shù)據(jù)雙向綁定底層實(shí)現(xiàn)原理
簡(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ā)項(xiàng)目中如何使用Font Awesome 5
Font Awesome是一套流行的圖標(biāo)字體庫,我們?cè)趯?shí)際開發(fā)的過程中會(huì)經(jīng)常遇到需要使用圖標(biāo)的場(chǎng)景,對(duì)于一些常用的圖標(biāo),我們可以直接在Font Awesome中找到并且使用,這篇文章主要給大家介紹了關(guān)于Vue開發(fā)項(xiàng)目中如何使用Font Awesome5的相關(guān)資料,需要的朋友可以參考下2021-11-11
詳解element上傳組件before-remove鉤子問題解決
這篇文章主要介紹了詳解element上傳組件before-remove鉤子問題解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue+elementUI實(shí)現(xiàn)動(dòng)態(tài)合并數(shù)據(jù)相同的單元格(可指定合并列)
這篇文章主要介紹了vue+elementUI如何實(shí)現(xiàn)動(dòng)態(tài)合并數(shù)據(jù)相同的單元格,文中有詳細(xì)的代碼實(shí)例供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下2023-07-07
vue+element-ui+sortable.js實(shí)現(xiàn)表格拖拽功能
這篇文章主要為大家詳細(xì)介紹了vue+element-ui+sortable.js實(shí)現(xiàn)表格拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
elementUI中的$confirm調(diào)換兩個(gè)按鈕位置的實(shí)例代碼
這篇文章主要介紹了elementUI中的$confirm調(diào)換兩個(gè)按鈕位置的實(shí)例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03
Vue3使用customRef封裝防抖函數(shù)的方法詳解
防抖函數(shù)的作用是高頻率觸發(fā)的事件,在指定的單位時(shí)間內(nèi),只響應(yīng)最后一次,如果在指定的時(shí)間內(nèi)再次觸發(fā),則重新計(jì)算時(shí)間,本文將給大家詳細(xì)的介紹一下Vue3使用customRef封裝防抖函數(shù)的方法,需要的朋友可以參考下2023-09-09
過濾器是vue為開發(fā)者提供的功能，常用于文本的格式化，過濾器應(yīng)該被添加在JavaScrip表達(dá)式的尾部，由“管道符”進(jìn)行調(diào)用，這篇文章通過案例給大家講解Vue過濾器介紹及使用方法，需要的朋友參考下吧2022-11-11
解決Vue-cli3沒有vue.config.js文件夾及配置vue項(xiàng)目域名的問題
這篇文章主要介紹了解決Vue-cli3沒有vue.config.js文件夾及配置vue項(xiàng)目域名的問題，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12
ES6 Proxy實(shí)現(xiàn)Vue的變化檢測(cè)問題
Vue3.0將采用ES6 Proxy的形式重新實(shí)現(xiàn)Vue的變化檢測(cè)，在官方還沒給出新方法之前，我們先實(shí)現(xiàn)一個(gè)基于Proxy的變化檢測(cè)。感興趣的朋友跟隨小編一起看看吧2019-06-06
這篇文章主要介紹了詳解Element 指令clickoutside源碼分析，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02