Vue數(shù)據(jù)雙向綁定底層實現(xiàn)原理
更新時間：2019年11月22日 08:36:12 作者：why_Because
這篇文章主要為大家詳細(xì)介紹了Vue數(shù)據(jù)雙向綁定底層實現(xiàn)原理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
簡介：
Vue 最獨特的特性之一，是其非侵入性的響應(yīng)式系統(tǒng)。數(shù)據(jù)模型僅僅是普通的 JavaScript 對象。而當(dāng)你修改它們時，視圖會進(jìn)行更新。簡單的說，就是數(shù)據(jù)變視圖變。
當(dāng)你把一個普通的 JavaScript 對象傳給 Vue 實例的 data 選項，Vue 將遍歷此對象所有的屬性，并使用 Object.defineProperty 把這些屬性全部轉(zhuǎn)為 getter/setter。Object.defineProperty 是 ES5 中一個無法 shim 的特性，這也就是為什么 Vue 不支持 IE8 以及更低版本瀏覽器。
下例為模擬，Vue數(shù)據(jù)雙向綁定底層實現(xiàn)原理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>數(shù)據(jù)雙向綁定底層實現(xiàn)</title>
</head>
<body>
<button onclick="changeTest()">點我改變</button>
<div id="test">哈哈哈</div>
<script>
let test={};
let middle='';
Object.defineProperty(test,'name',{
set(val){
console.log('觸發(fā)setter');//設(shè)置、修改時觸發(fā)set
middle=val;
watcher();
},
get(){
console.log('觸發(fā)geter');//獲取、使用時觸發(fā)get
return middle;
}
})
function changeTest(){
test.name="變變變";//觸發(fā)setter
}
function watcher(){
document.getElementById('test').innerHTML=test.name;//觸發(fā)get
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue開發(fā)項目中如何使用Font Awesome 5
Font Awesome是一套流行的圖標(biāo)字體庫,我們在實際開發(fā)的過程中會經(jīng)常遇到需要使用圖標(biāo)的場景,對于一些常用的圖標(biāo),我們可以直接在Font Awesome中找到并且使用,這篇文章主要給大家介紹了關(guān)于Vue開發(fā)項目中如何使用Font Awesome5的相關(guān)資料,需要的朋友可以參考下2021-11-11
詳解element上傳組件before-remove鉤子問題解決
這篇文章主要介紹了詳解element上傳組件before-remove鉤子問題解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue+elementUI實現(xiàn)動態(tài)合并數(shù)據(jù)相同的單元格(可指定合并列)
這篇文章主要介紹了vue+elementUI如何實現(xiàn)動態(tài)合并數(shù)據(jù)相同的單元格,文中有詳細(xì)的代碼實例供大家參考,具有一定的參考價值,需要的朋友可以參考下2023-07-07
vue+element-ui+sortable.js實現(xiàn)表格拖拽功能
這篇文章主要為大家詳細(xì)介紹了vue+element-ui+sortable.js實現(xiàn)表格拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
elementUI中的$confirm調(diào)換兩個按鈕位置的實例代碼
這篇文章主要介紹了elementUI中的$confirm調(diào)換兩個按鈕位置的實例代碼,本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03
Vue3使用customRef封裝防抖函數(shù)的方法詳解
防抖函數(shù)的作用是高頻率觸發(fā)的事件,在指定的單位時間內(nèi),只響應(yīng)最后一次,如果在指定的時間內(nèi)再次觸發(fā),則重新計算時間,本文將給大家詳細(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項目域名的問題
這篇文章主要介紹了解決Vue-cli3沒有vue.config.js文件夾及配置vue項目域名的問題，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-12-12
Vue3.0將采用ES6 Proxy的形式重新實現(xiàn)Vue的變化檢測，在官方還沒給出新方法之前，我們先實現(xiàn)一個基于Proxy的變化檢測。感興趣的朋友跟隨小編一起看看吧2019-06-06
這篇文章主要介紹了詳解Element 指令clickoutside源碼分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02