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创建的数据改变都会是初始数据改变