vue2.0/3.0的響應式原理及區別淺析
前言
自從vue3.0正式上線以來，好多小夥伴都轉戰vue3.0了，這裡把我自己總結的3.0和2.0的原理以及他倆的區別寫出來，方便自己學習。
step 一，vue2.0的響應式原理
先看看官網的解釋：
當你把一個普通的 javascript 物件傳給 Vue 例項的 data 選項，Vue 將遍歷此物件所有的屬性，並使用 Object.defineProperty 把這些屬性全部轉為 getter/sett程式設計客棧er。Object.defineProperty 是 ES5 中一個無法 shim 的特性，這也就是為什麼 Vue 不支援 IE8 以及更低版本瀏覽器的原因。
這些 getter/setter 對使用者來說是不可見的，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。這裡需要注意的問題是瀏覽器控制檯在列印資料物件時 getter/setter 的格式化並不同，所以你可能需要安裝 vue-devtools 來獲取更加友好的檢查介面。
每個元件例項都有相應的 watcher 例項物件，它會在元件渲染的過程中把屬性記錄為依賴，www.cppcns.com之後當依賴項的 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,在同一元素上http://www.cppcns.com使用v-for和v-if的優先順序已經更改
6，v-for上邊的key用法已經更改
7，v-for的ref不在註冊為陣列
8,destroyed,beforeDestroy生命週期被重新命名為unmounted和beforeUnmount
9,<template>被視為普通元素，而不是渲染器內部的內容
這裡貼一下官網釋出的重大變更
總結
到此這篇關於vue2.0/3.0的程式設計客棧響應式原理及區別的文章就介紹到這了,更多相關vue2.0/3.0響應式原理內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！