前言
自從vue3.0正式上線以來，好多小伙伴都轉(zhuǎn)戰(zhàn)vue3.0了，這里把我自己總結(jié)的3.0和2.0的原理以及他倆的區(qū)別寫出來，方便自己學(xué)習(xí)。
step 一，vue2.0的響應(yīng)式原理
先看看官網(wǎng)的解釋：
當(dāng)你把一個(gè)普通的 JavaScript 對象傳給 Vue 實(shí)例的 data 選項(xiàng)，Vue 將遍歷此對象所有的屬性，并使用 Object.defineProperty 把這些屬性全部轉(zhuǎn)為 getter/setter。Object.defineProperty 是 ES5 中一個(gè)無法 shim 的特性，這也就是為什么 Vue 不支持 IE8 以及更低版本瀏覽器的原因。
這些 getter/setter 對用戶來說是不可見的，但是在內(nèi)部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時(shí)通知變化。這里需要注意的問題是瀏覽器控制臺在打印數(shù)據(jù)對象時(shí) getter/setter 的格式化并不同，所以你可能需要安裝 vue-devtools 來獲取更加友好的檢查接口。
每個(gè)組件實(shí)例都有相應(yīng)的 watcher 實(shí)例對象，它會在組件渲染的過程中把屬性記錄為依賴，之后當(dāng)依賴項(xiàng)的 setter 被調(diào)用時(shí)，會通知 watcher 重新計(jì)算，從而致使它關(guān)聯(lián)的組件得以更新。
這里說一下自己的理解
其實(shí)看過api,源碼的人就不難知道，
v-model,響應(yīng)式原理共分為兩層第一層，底層，就是es5的一個(gè)特性
Object.defineProperty通過getter,setter更新數(shù)據(jù)，
第二層，表現(xiàn)層，看過v-model原理的人都知道，v-model里邊有一個(gè)watcher,v-onwatcher監(jiān)聽到數(shù)據(jù)變化，v-on更新到視圖中。
step 二，vue3.0的響應(yīng)式原理
先看看官網(wǎng)的解釋：
這也就是vue3.0可以直接對對象屬性進(jìn)行刪除和修改的原因
vue3.5.png
step 三，總結(jié)一下兩者的區(qū)別
----------- 3.0
(前兩者不在像2.0的時(shí)候需要進(jìn)行set才能更改?？梢灾苯痈?
1，3.0 proxy 可以直接數(shù)組類型的數(shù)據(jù)變化
2，可以直接實(shí)現(xiàn)對象屬性的新增和刪除
3，3.0兼容ie12以上
4，組件上的v-model語法變更為v-bind.sync
5, 在同一元素上使用v-for和v-if的優(yōu)先級已經(jīng)更改
6，v-for上邊的key用法已經(jīng)更改
7，v-for的ref不在注冊為數(shù)組
8,destroyed,beforeDestroy生命周期被重命名為unmounted和beforeUnmount
9,<template>被視為普通元素，而不是渲染器內(nèi)部的內(nèi)容
這里貼一下官網(wǎng)發(fā)布的重大變更
結(jié)束語
我也還在不斷學(xué)習(xí)中，有不足的以后會慢慢更新。
