一文讲清楚vue3中ref、reactive、toRef、toRefs、isRef、isReactive、unref、toValue的使用

创建响应式数据

ref

先看一个组件

let template = `
    <div>{
    {count}}</div>
    <button @click="count++">在模板+1</button>
    <button @click="increment">通过方法+1</button>
`
export default {
   
    setup: function () {
   
        let count = 0

        let increment = () => count++

        return {
    count, increment }
    },
    template,
}

我们定义了一个count，还有一个修改它的方法，并尝试在模板中通过两种方式去修改它，但结果却是页面没有任何变化。其实通过这些操作我们已经修改了count的值，只是未能得到视图的更新，所以我们看到的还是最初的值，那如何解决呢？这就引出了响应式数据

ref()： 用于创建一个包装基本类型值的响应式对象。它将基本类型值（如数字、字符串等）转换为响应式对象（但其实也可以是引用类型），使其具有响应式特性。ref() 返回一个包含 value 属性的对象，通过这个属性来访问和修改值。修改上述代码：

import {
    ref } from 'https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.esm-browser.js'

let template = `
    <div>{
    {count}}</div>
    <button @click="count++">在模板+1</button>
    <button @click="increment">通过方法+1</button>
`
export default {
   
    setup: function () {
   
        let count = ref(0)

        let increment = () => count.value++

        return {
    count, increment }
    },
    template,
}

count 是一个响应式对象，通过 ref 包装了初始值为 0 的基本类型值。

ref返回的是被包装过的响应式对象，在setup中访问和修改ref需要使用.value属性。在模板中使用ref时，vue3会自动将ref对象拆解为原始值，一定要知道模板上的ref不再是对象，没有.value属性。

ref 通常用于声明基础类型响应式数据，但也能包装引用类型(对象，数组)：

import {
    ref } from 'https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.esm-browser.js'

let template = `
    <span>{
    {info.name}}</span>
    <span>{
    {info.age}}</span>
    <button @click="info.age++">在模板年龄+1</button>
    <button @click="increment">通过方法年龄+1</button>
`
export default {
   
    setup: function () {
   
        let info = ref({
    name: '张三', age: 18 })

        let increment = () => info.value.age++

        return {
    info, increment }
    },
    template,
}

reactive

reactive()： 用于创建一个包装引用类型的响应式对象