ref、toRef、reactive、toRefs

問題1：reactive定義數組，如下：

let arr = reactive([])

注意：當給arr賦值的時候，不能 arr=xxx 這樣會取消arr的響應式

首先 需要聲明一點ref、toRef、toRefs這三項在js中操作的時候都需要跟上‘.value’，頁面當中正常使用無需‘.value’

一、關於ref

接受一個內部值並返回一個響應式且可變的 ref 對象，也就是ref可以接受一個普通類型的值，也可接受一個對象

let state = ref(0)
let state = ref(true)
let state = ref(null)
let state = ref({})

在js中獲取的時候

state.value

二、關於reactive

reactive 用於為對象添加響應式狀態，接收一個js對象作為參數

let state = reactive({})
let state = reactive([])

注意：數組【[]】也是對象，但是對於數組來說，不能用等於【=】號賦值，這樣會取消數據的響應式，如文章開頭時所說。

在js中獲取的時候

state.xxx

三、關於toRef和toRefs

區別在於

toRef：可以用來為源響應式對象上的某個 property 新創建一個 ref，即可以為某一個源響應式【下邊具體介紹這里為啥要說源響應式】屬性添加響應式

toRefs: 可以為一組源響應式【下邊具體介紹這里為啥要說源響應式】屬性添加響應式

譯：源響應式指的初始化數據【下邊具體介紹原因】

用法：toRef

第一種
let state1 = ref({name: '張三'})
let state2 = toRef(state1.value, 'name')
第二種
let state1 = reactive({name: '張三'})
let state2 = toRef(state1, 'name')

獲取的時候

對於第一種方式取值
state2.value.nama
對於第二種方式取值
state2.value.nama

用法：toRefs

第一種
let state1 = ref({name: '張三'})
let state2 = toRefs(state1.value)     // 通過ref定義的值，需要通過.value獲取，即state1.value
第二種
let state1 = reactive({name: '張三'})
let state2 = toRefs(state1)

獲取的時候

對於第一種方式取值
state2.value.nama
對於第二種方式取值
state2.value.nama

通過用法可以證實上邊的區別：toRef針對的是某一項，toRefs針對的是一組。同時也可以證實ref、toRef、toRefs在js中取值需要加 ‘.value’

關於toRef和toRefs需要特別注意的是

關於網上其他文章的說法，通過toRef/toRefs創建的數據，當值改變的時候UI視圖不會更新說法是片面的

對於toRef/toRefs創建數據，數據改變UI視圖不變，這是由於初始定義的數據是非響應式的，如下

let state1 = {name: '張三'}
let state2 = toRef(state1, 'name')
let state3 = toRefs(state1)
這種情況下，
1、當state2.value.name改變時，UI視圖不會變化。
2、同理state3.value.name改變時，UI視圖不會變化。

但是對於toRef/toRefs創建數據，如果原始數據是響應式的，則UI視圖會變化，如下：

 

let state0 = ref({name: '張三'})
let state1 = reactive({name: '張三'})

let state2 = toRef(state0.value, 'name')
let state3 = toRefs(state1)
對於這種情況來說：
1、state2.value.name 或 state3.value.name改變時，此時UI是變化的

 

這里也就說明為啥上邊用源響應式，因為有非響應式的時候

這里還有一點需要注意的是：不管初始數據（源數據）是響應式還是非響應式，toRef/toRefs創建的數據改變都會是初始數據改變