上個文章我們說了vue2的原理，看這裡。
現在簡單說一下vue3的原理。
vue3 建議大家還是多多看看官網，畢竟文法都變了，雖然相容vue2，但是最好按照官網說的取用vue3 .不然會有一系列的報錯。很是頭疼。
例如 vue2中用 data(){return { }}等， vue3 就舍棄了這個，直接用的是setup(){…, return{導出定義的屬性/對象、數組等、函數等}}
vue3的響應式：實作原理
通過Proxy（代理）：攔截對象中任意屬性的變化，包括：屬性值讀寫。屬性的添加，屬性的删除等。
通過Reflect(反射)：對被代理對象的屬性進行操作。
在vue3 中要注意它新增了一個ref函數 此ref非vue2中的ref 。
這裡的
ref
接受一個内部值并傳回一個響應式且可變的 ref 對象。ref 對象僅有一個 .value property，指向該内部值。（可以大白話的了解為基礎的資料使用）
const count = ref(0)
console.log(count.value) // 0
也就是要跟一個 .value ，後邊發現很扯。
然後有一個
reactive
：傳回對象的響應式副本（大白話的了解為複雜資料資料）
const obj = reactive({ count: 0 })
響應式轉換是“深層”的——它影響所有嵌套 property。在基于 ES2015 Proxy 的實作中，傳回的 proxy 是不等于原始對象的。建議隻使用響應式 proxy，避免依賴原始對象。
當将 ref 配置設定給 reactive property 時，ref 将被自動解包。
我們寫的時候也就避免了 .value 的形式。
<template>
<h1>
vue3
<p>{{person.name}}</p>
<p>{{person.age}}</p>
<p v-show= "person.sex"> 性别：{{person.sex}}</p>
<p>{{person.job.type}}</p>
<p>{{person.job.salary}}</p>
<p>{{person.job.a.b.c}}</p>
<button @click="changeInfo">更新</button>
<button @click="setInfo">添加屬性</button>
<button @click="delInfo">删除屬性</button>
</h1>
</template>
<script>
import { reactive } from 'vue'
export default {
name: 'App',
setup(){
// 基礎資料
let person = reactive({
name : '張',
age : '19',
job: {
type:" 前端",
salary: "30k",
a:{
b:{
c:555
}
}
}
})
function changeInfo(){
person.name= 'lisi'
person.age= '34'
person.job.type = '經理'
person.job.salary = '40k'
// job.value.type = '經理'
// job.value.salary = '40k'
person.job.a.b.c = 666
console.log(person);
}
function setInfo(){
person.sex='男'
}
function delInfo(){
delete person.name
}
return {
person,changeInfo, setInfo, delInfo
}
}
}
</script>
看一下這裡
對比 reactive 和 ref
1 從定義資料角度對比：
ref 用來定義:基本資料類型；
reactive用來定義：對象（數組）類型資料；
注意： ref 也可以用來定義對象（或數組）類型資料，他内部會自動通過reactive轉我代理對象。
2 從原理角度對比：
ref 通過Object.defineProperty()的get與set來實作響應式（資料劫持）。
reactive 通過 使用Proxy來實作響應式（資料劫持），并開通Reflect操作 源對象 内部的資料。
3 從使用角度對比：
ref 定義的資料：操作資料需要 .value ,讀取資料時模闆中直接讀取不需要 .value。
reactive 定義的資料：操作資料與讀取資料 均不需要 .value.
後期在繼續優化。有不同見解歡迎交流。