vue2.0/3.0中響應式的原理是什么

本篇文章為大家展示了vue2.0/3.0中響應式的原理是什么，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

vue是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

step 一，vue2.0的響應式原理

先看看官網的解釋：

當你把一個普通的 JavaScript 對象傳給 Vue 實例的 data 選項，Vue 將遍歷此對象所有的屬性，并使用 Object.defineProperty 把這些屬性全部轉為 getter/setter。Object.defineProperty 是 ES5 中一個無法 shim 的特性，這也就是為什么 Vue 不支持 IE8 以及更低版本瀏覽器的原因。

這些 getter/setter 對用戶來說是不可見的，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。這里需要注意的問題是瀏覽器控制臺在打印數據對象時 getter/setter 的格式化并不同，所以你可能需要安裝 vue-devtools 來獲取更加友好的檢查接口。

每個組件實例都有相應的 watcher 實例對象，它會在組件渲染的過程中把屬性記錄為依賴，之后當依賴項的 setter 被調用時，會通知 watcher 重新計算，從而致使它關聯的組件得以更新。

這里說一下自己的理解

其實看過api,源碼的人就不難知道，v-model,響應式原理共分為兩層

• 第一層，底層，就是es5的一個特性Object.defineProperty通過getter,setter更新數據，

• 第二層，表現層，看過v-model原理的人都知道，v-model里邊有一個watcher,v-onwatcher監聽到數據變化，v-on更新到視圖中。

step 二，vue3.0的響應式原理

先看看官網的解釋：

這也就是vue3.0可以直接對對象屬性進行刪除和修改的原因

step 三，總結一下兩者的區別

----------- 3.0

(前兩者不在像2.0的時候需要進行set才能更改。可以直接更改)

1，3.0 proxy 可以直接數組類型的數據變化

2，可以直接實現對象屬性的新增和刪除

3，3.0兼容ie12以上

4，組件上的v-model語法變更為v-bind.sync

5, 在同一元素上使用v-for和v-if的優先級已經更改

6，v-for上邊的key用法已經更改

7，v-for的ref不在注冊為數組

8,destroyed,beforeDestroy生命周期被重命名為unmounted和beforeUnmount

9,<template>被視為普通元素，而不是渲染器內部的內容

這里貼一下官網發布的重大變更

上述內容就是vue2.0/3.0中響應式的原理是什么，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。