前言：
前天我們學了 ref 和 reactive ，提到了回應式資料和 Proxy ，那我們今天就來了解一下，vue3 的回應式
在了解之前，先復習一下之前 vue2 的回應式原理
vue2 的回應式：
原理：
物件型別：通過 Object.defineProperty（） 物件的讀取，修改進行攔截，也就是資料劫持，回應式的根基
缺點：因為只有 讀取和修改（get，set）所以新增屬性，和洗掉屬性，頁面是不會重繪的
陣列型別：通過重寫，更新陣列的一系列方法來實作攔截，假如你調了一個陣列的 push 方法，其實 push 是被二次重寫封裝的（對陣列的變更方法進行了重寫）
缺點：直接通過下標修改陣列，頁面不會更新
解決方法：用 this.$set（資料，添加名字，添加內容），this.$delete（資料，洗掉的資料名）
vue3 的回應式：
通過 Proxy 代理 ：攔截物件中任意屬性的變化，包括增，刪，改，查
通過 Reflect 反射 ： 對被代理物件（源物件）的屬性進行操作
new Proxy(data,{
//攔截讀取的屬性值
get(target,prop){
return Reflect.get(targert,prop)
}
//攔截設定和添加
set(target,prop,value){
return Reflect.set(targert,prop,value)
}
// 攔截洗掉
deleteProperty(target,prop){
return Reflect.deleteProperty(targert,prop)
}
})
這差不多就是 vue3 回應式的簡單原理，Proxy 比較之前的 Object.defineProperty 功能更詳細，和強壯
reactive 與 ref 的區別：
定義：
ref：用來定義基本資料型別
reactive：用來定義物件（陣列）型別資料
ps：ref 也可以用來定義物件（或陣列）型別資料，內部求助了 reactive
原理：
ref： 通過 Object.defineProperty（）的 get 與 set 來實作回應式也就是資料劫持
reactive：通過使用 Proxy 來實作回應式，并用 Reflect 操作源物件內部資料
使用：
ref：用 ref 定義的資料，操作需要 .value
reactive ： 定義的資料，操作不需要
setup 的注意：
setup 的執行時機是在 beforeCreate 之前執行，this 是 undefined
setup 的引數：
props ：值為物件，包含：組件外部傳遞過來，并且組件內部宣告接收了的屬性
context ：背景關系物件，有三個值分別是 attrs，slots，emit
attrs ：物件，沒有在 props 宣告配置的屬性，相當于 vue2 的 this.$attrs
slots ：插槽，相當于 this. $slots
emit ：分發自定義事件的函式，相當于 this.$emit
計算屬性，computed函式
與 vue2 中的 computed 配置功能一致
watch 函式監聽：
與 vue2 中的 watch 配置功能一致
watch 監視 ref 基本資料：
情況一 ：監視 ref 定義的一個回應式資料
let sum = ref(0)
watch(sum,(newValue,oldValue)=>{
console.log('監聽sum變了',newValue,oldValue)
})
情況二：監視 ref 定義的多個回應式資料
let msg = ref('你好啊')
let sum = ref(0)
watch([sum,msg],(newValue,oldValue)=>{
console.log('監聽sum變了',newValue,oldValue)
},{immediate:true})
ps：watch 一共可以傳遞三個值，第一個 監視的資料，監視的行為，watch 的配置
watch 監視 reactive 物件：
情況三：監視 reactive 所定義資料中的全部屬性
let preson = reactive({
name:'六扇老師',
age:18
})
watch(preson,(newValue,oldValue)=>{
console.log('監聽preson變了',newValue,oldValue)
}，{deep：false}) // 此處的 deep 配置無效
ps：此處無法正確的獲得 oldValue，是 reactive 的問題無法解決
強制開啟深度監視（ deep 配置無效）
情況四：監視 reactive 所定義資料中的某一個屬性
watch(()=>preson.name,(newValue,oldValue)=>{
console.log('監聽preson.name變了',newValue,oldValue)
})
情況五：監視 reactive 所定義資料中的某些屬性
watch([()=>preson.name,()=>preson.age],(newValue,oldValue)=>{
console.log('監聽preson.name/preson.age變了',newValue,oldValue)
})
特殊情況：
let preson = reactive({
name:'六扇老師',
age:18,
job:{
j1:{ salary:30 }
}
})
watch(()=>preson.job,(newValue,oldValue)=>{
console.log('監聽preson.job變了',newValue,oldValue)
},{deep:true})
ps：如果單獨監視 reactive 物件里面的物件的資料，則必須開啟 deep:true 深度監視，否則監視無效
watchEffect 函式:
watchEffect 函式是 vue3 新增的一個函式
和 watch 區別：
watch：既要指明監視屬性，也要指明監視的回呼
watchEffect ：不用指明監視屬性，監視的回呼中使用了那個屬性，就默認監視那幾個屬性
watchEffect 和 computed 有點像似
不一樣的是，computed 注重計算出來的值，回呼函式的回傳值，所以必須要寫回傳值
watchEffect 更注重程序，回呼函式的函式體，所以不用寫回傳值
let sum = ref(0)
let preson = reactive({
name:'六扇老師',
age:18,
job:{
j1:{ salary:30 }
}
})
// watchEffect vue3 新增
// 默認開啟 immediate,也有 deep
watchEffect(()=>{
const x1 = sum.value const
x2 = preson.job.j1.salary
console.log('所指定的 watchEffect 的回呼執行了')
})
vue2 和 vue3 生命周期對比：
vue2 開始不管你有沒有使用都會先執行倆個鉤子，然后才會去判斷，vue3 則不會得明確得告訴 app 你服務于那個容器，才開始走，更智能了
剩下得生命周期都相差不多，但在 vue3 里用 beforeUnmount （卸載之前）和 unmounted （卸載完畢）替換了 beforeDestroy （銷毀之前） 和 destroyed （銷毀完畢），和 react 像似了
組合式 api 里面的生命周期：
用組合式 api 往 setup 里面寫的生命周期，這種寫法不見得非要用，只是了解就行，問題不大
| beforeCreate | setup |
| created | setup |
beforeCreate 和 created 這倆鉤子 vue3 并沒有給我們提供組合式 api ，放不進去 setup，setup 就相當于他們倆個
| beforeMount | onbeforeMount |
| mounted | onmounted |
| beforeUpdate | onbeforeUpdate |
| updated | onupdated |
| beforeUnmount | onbeforeUnmount |
| unmounted | onunmounted |
就是在之前的生命周期，加上一個 on，而且 setup 的優先級更高
自定義 hook 函式：
hook 本質是一個函式，把 setup 函式中使用的 組合式 API 進行了自定義封裝
類似于 vue2 中的 mixin
自定義 hook 復用代碼，可以讓 setup 中的邏輯更清楚，更容易懂，更簡單
toRef：
創建一個 ref 物件，其 value 值指向另一個物件中的某個屬性
回到我們之前的代碼
可以看到頁面上，想要獲取資料，就要 preson 點什么什么一大堆，看著也不美觀，這時候就要用到 toRef 了
toRef 語法 ： const name = toRef （preson ，‘nama’） 第一個引數物件，第二個是物件里的那個值
toRefs：
toRef 的升級版，可以批量處理一個物件里的所有屬性
以上就是我們常用的組合式 API 了，知道了這些差不多就完成了一個 vue3 的入門，明天我們開始學習一些不常用的組合式 API ，雖然不常用當還是要了解滴，所以我們明天再見
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/538765.html
標籤：其他
上一篇：面向物件
下一篇：淺入淺出JS垃圾回識訓制