Vue3学习（组合式API——reactive()和ref()函数详解）

目录

一、reactive()函数。

（1）介绍与使用。

（2）简单案例演示。

二、ref()函数。

（1）介绍与使用。

（2）简单案例演示。

<1>ref()函数获取响应式对象的本质与底层。

<2>基于简单类型或对象类型数据ref()构建响应式对象演示。

三、reactive()与ref()函数小结。

一、reactive()函数。

（1）介绍与使用。

官方解释：返回一个对象的响应式代理。

基本作用：接收对象类型 数据的参数传入并返回一个响应式对象。之所以学这个函数是因为在Vue中默认的数据并不是响应式的。希望得到的是响应式的数据就需要通过函数reactive()或ref()进行处理。

核心使用步骤：

1、导入reactive()函数。

2、执行reactive()函数并传入类型为对象的初始值，并使用变量接收返回值。

（2）简单案例演示。

代码。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{{state}}</div>
        <div>-----------------------</div>
        <div>{{state.count}}</div><button @click="changeCount">count++</button>
    </div>
    <script type="module">
        import { createApp, reactive } from './vue.esm-browser.js'
        createApp({
            setup() {
                //reactive接收一个对象类型的数据，返回一个响应式的对象
                const state = reactive({
                    count: 100
                })
                const changeCount = () => {
                    state.count++
                }
                return {
                    state,
                    changeCount
                }

            }
        }).mount('#app')
    </script>
</body>

</html>

效果。

reactive()必须接收对象类型的数据！
如果接收简单类型数据又希望它是响应式，就需要使用函数ref()。

二、ref()函数。

（1）介绍与使用。

官方解释：接受一个内部值，返回一个响应式的、可更改的 ref 对象。此对象只有一个指向其内部值的属性 .value。

基本作用：接收简单类型 或对象类型 的数据传入，并返回一个响应式的对象。

核心使用步骤：

1、导入ref()函数。

2、执行ref()函数并传入初始值（简单类型或对象类型），并使用变量接收ref()函数的返回值。

（2）简单案例演示。

<1>ref()函数获取响应式对象的本质与底层。

本质：在原有传入数据的基础上，外层包了一层对象，包成复杂类型。
底层：包成复杂类型之后，再借助reactive()函数实现了响应式！
脚本中访问数据，需要通过.value。

代码示例。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{{state}}</div> <!-- 插值表达式中不需要使用.value -->
    </div>
    <script type="module">
        import { createApp, ref } from './vue.esm-browser.js'
        createApp({
            setup() {
                //ref接收简单类型或对象类型的数据，返回一个响应式的对象
                //本质：在原有传入的数据基础上包了一层对象
                const state = ref(0)
                console.log(state)
                console.log(state.value)
                return {
                    state
                }
            }
        }).mount('#app')
    </script>
</body>

</html>

效果。

<2>基于简单类型或对象类型数据ref()构建响应式对象演示。

代码。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 插值表达式中不需要使用.value -->
        <div>{{state}}</div><button @click="changeCount">count++</button>
        <div>-----------------------</div>
        <div>{{userInfo}}</div>
    </div>
    <script type="module">
        import { createApp, ref } from './vue.esm-browser.js'
        createApp({
            setup() {
                //ref接收简单类型或对象类型的数据，返回一个响应式的对象
                const userInfo = ref({
                    name: 'zs',
                    age: 18
                })
                //本质：在原有传入的数据基础上包了一层对象
                const state = ref(0)
                console.log(state)
                const changeCount = () => {
                    state.value++  //脚本中使用.value访问值
                    console.log(state.value)
                }
                return {
                    state,
                    userInfo,
                    changeCount
                }

            }
        }).mount('#app')
    </script>
</body>

</html>

效果。

三、reactive()与ref()函数小结。

reactive和ref函数的共同特点：使用函数调用的方式生成响应式数据！

reactive不能处理简单类型的数据。

ref参数类型支持更多，但脚本中必须通过.value访问修改。

ref函数内部实现依赖于reactive函数。

推荐：声明数据统一使用ref()，更加灵活且统一。