ref 的用处

• ref 将 setup 函数声明的变量变为响应式，包含且仅有一个 value 属性

ref 与 reactive 的区别

• ref 是把值类型添加一层包装，使其变成响应式的引用类型的值。
• reactive 则是引用类型的值变成响应式的值。
• 所以两者的区别只是在于是否需要添加一层引用包装，其目的都是对数据添加响应式效果。

ref 包装变量后如何取值

• 使用 ref 之后，需要使用.value才行进行取值和赋值操作。

代码示例说明

在模板中有以下代码

<template>
    <div>
        <h1>num:{{num}}</h1>
        <h1>count:{{count}}</h1>
        <button @click="change">add</button>
    </div>
</template>

// 不使用 ref 时
<script>
    export default {
        setup(){
            const state = reactive({
                count: 0
            })
            let num = 0
            change(){
                console.log(num++) // 不会输出 1
                console.log(count++) // reactive 是响应式的，会输出 1
            }
        }
    }
</script>

// 使用 ref 时
<script>
    export default {
        setup(){
            const state = reactive({
                count: 0
            })
            let num = ref(0)
            change(){
                console.log(num++) // 输出 1
                console.log(count++) // 输出 1
            }
        }
    }
</script>