定制网站开发的目的是什么做单位网站的公司吗
目录
一、reactive()函数。
（1）介绍与使用。
（2）简单案例演示。
二、ref()函数。
（1）介绍与使用。
（2）简单案例演示。
<1>ref()函数获取响应式对象的本质与底层。
<2>基于简单类型或对象类型数据ref()构建响应式对象演示。
三、reactive()与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()，更加灵活且统一。