前言

背景

vue3的一个重大非兼容性迁移：组合式API
搞清楚组合式之前需要学习Refs，因为在setup函数中使用Refs是必不可少的

响应式

在vue中，响应式是一个特别重要的概念。变量响应式是vue渲染的前提。Refs中的各个方法就是处理响应式相关的。
验证是否是响应式对象的最好方法是在watch中能否监测到该值的变化

Refs跟refs的区别

其实refs跟Refs没什么必然的联系。refs在vue2中就存在。它只的是对一个元素或者是一个组件的引用标记。
例：

// template中
<input ref="textInput"/>
<button @click="getFocus">input获取焦点</button>
// js中的代码
methods: { 
    getFocus(){
        this.$refs.textInput.focus()
    }
}

Refs使用说明

ref

ref:接收一个值并返回一个ref对象（具有value属性）
重点:
1.是将一个非响应式的变量变成一个响应式的
2.返回的值是一个有value属性的响应式变量，在setup内部调用改值的话需要使用.value
3.通过setup将该响应式变量return之后在模版中使用，该变量是自动解包的，不需要使用.value调用，直接使用该变量就可以调用
例：

import { ref } from 'vue'
setup(){
    const test = ref('test')
    test.value = 'change'
}
// template中的调用
<span> {{test}} </span> //显示的是change

reactive

reactive：将一个非响应式的对象转换成一个属性值都是响应式的对象重点：
1.传入一个非响应式的对象，返回的是每个属性值都是响应式的对象 2.经过reactive转换后的对象深层ref是经过自动解包的，无论是在js中还是模版中访问都可以直接访问到属性值例：

import { ref } from 'vue'
setup(){ 
    const test = ref({count: 1}) 
    test.count++
 } 
 // template中的调用 
 <span> {{test.count}} </span> //显示的是2

unref

unref并不是直接将一个响应式对象转成非响应式,根据传入的值，如果传入的值是一个ref的值，则返回他的value，否则返回它传入值本身,最终返回的值是非响应式的。例：

import { ref, unref } from 'vue'
setup(){ 
    const unReactiveData = 1
    const reactiveData = ref(2)
    const unReactiveDataRef = unref(unReactiveData)
    console.log(unReactiveDataRef) // 1直接返回了当前
    const reactiveDataRef = unref(reactiveData)
    console.log(reactiveDataRef) //2,直接返回了响应式变量的值
    //unref等价于
    const unRefData = isRef(data) ? data.value : data
 }

toRef

获取一个响应式对象的某一个属性值的时候也能将这个值变为一个响应式对象
例：

const reactiveData = reactive({
    name: 'aaa',
    age: 12
})
const { name } = reactiveData //此时name是非响应式的
const name = toRef(reactiveData,'name') //此时name是响应式的

toRefs

将一个响应式的对象进行拆解，获取响应式对象的属性的时候使得每一个变量都是响应式的
例：

setup(props){
//setup传入的props本身是一个响应式的对象，但是在获取属性时如果用解构的方式则会将其属性值变成非响应式如
const { name, data } = props //此时name和data则都是非响应式的
const { name, data } = toRefs(props) 此时name和data则都是响应式的
//重点：在js中使用时还是需要使用name.value
}

重点：
1.setup中的props本身是响应式的
2.toRefs和reactive的区别：reactive传入的值是非响应式的，toRefs传入的值响应式的。eactive返回的是解包后的值，可以直接使用对象的各个属性值，toRefs返回的值是未解包的，是需要通过.value使用的。

vue3-Refs的理解

前言

背景

响应式