目录
<2>基于简单类型或对象类型数据ref()构建响应式对象演示。
一、reactive()函数。
（1）介绍与使用。
- 官方解释：返回一个对象的响应式代理。
- 基本作用：接收对象类型数据的参数传入并返回一个响应式对象。之所以学这个函数是因为在Vue中默认的数据并不是响应式的。希望得到的是响应式的数据就需要通过函数reactive()或ref()进行处理。
- 核心使用步骤：
- 1、导入reactive()函数。
- 2、执行reactive()函数并传入类型为对象的初始值，并使用变量接收返回值。
（2）简单案例演示。
- 代码。
<!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。
- 代码示例。
<!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()构建响应式对象演示。
- 代码。
<!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()，更加灵活且统一。