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