Vue2 0響應式原理

2021-10-24 00:26:51 字數 341 閱讀 5467

最近vue3.0響應式原理引起前端陣陣狂熱,所以我也下定決心將vue的響應式原理總結一下。

我們都知道vue2.0的響應式原理使用的乙個核心api是object.defineproperty.為我們要觀察的資料設定getter和setter方法。

我們可以看到如果響應式的資料多的時候,我們需要迴圈遍歷data中的每乙個key屬性,這無疑是造成效能的下降。所以在vue3.0中就改變了這種實現方式而改為es6中新增的proxy方式來實現。而這個api沒有shim,也說明vue3.0徹底摒棄了一些低版本的瀏覽器。

手寫Vue2 0響應式原理

今天來實現乙個簡易版的vue2.0響應式 class vue 響應化 this.observe this.data 測試 new watcher this,test this.test 建立編譯器 new compile options.el,this if options.created 遞迴遍歷...

vue2 0響應式原理的應用

監測屬性的變化 function observe target 對物件中的每乙個屬性進行監視 for let key in target function definereactive target,key,value set newval function updateview let data ...

Vue 2 0中的響應式原理實現

主要原理 使用object.defineproperty方法給物件的每乙個屬性註冊 get 和set方法,在set方法中執行render方法進行頁面重新渲染 let obj 定義響應式,此方法用來對某一物件進行註冊set和get方法操作 let definereactive obj,key,valu...