扬中网站建设流程如何运营好一个网站

合集篇：
1.【Vue3】创建并运行一个简易的Vue3项目
2.【Vue3】编写vue实现一个简单效果，并使用setup糖简化代码

reactive

reactive对象类型的响应式数据

1. 概念理解

a. 概念

• reactive 是 Vue 3 提供的一个函数，用于创建响应式对象。它通过 ES6 Proxy 实现深层响应式，适用于 对象和数组 等复杂数据类型。

b. 分析、特点

• reactive函数接收一个普通对象，返回该对象的 响应式代理。
• 注意：使用reactive时
  • 仅对对象类型有效（Object/Array/Map/Set等）
  • 解构或传递属性会失去响应性
  • 直接替换整个对象会破坏响应性连接
  • 可以使用toRefs保持解构后的响应性

2. 代码实操

代码场景

初始代码场景为：

<template><div class="Person"></div>
</template><script setup name="Person"></script><style>.Person {background-color: rgb(0, 238, 255);box-shadow: 0 0 10px;border-radius: 20px;padding: 20px;}
</style>

其中，<template>和<script>标签的主要内容先空着，是接下来要说的内容。

步骤一：添加数据

在<script>标签中添加数据，先添加一个human对象，其有姓名和年龄：

<script setup name="Person">let human = {name:'zhangsan',age:'30'}
</script>

步骤二：显示数据

接下来，要在页面中显示数据，编写<template>标签内容：

<template><div class="Person"><h2>{{ human.name }}的年龄为{{ human.age }}</h2></div>
</template>

• 验证：终端输入npm run dev运行，在浏览器访问服务器，得到以下界面：
  

在页面中可以看到设置好的name和age都显示出来了，但这些数据不是响应式数据，无法通过方法修改。
实际上数据已经修改了，但页面只会显示最开始的数据。

步骤三：添加方法

在<script>标签中添加方法addAge()：

<script setup name="Person">let human = {name:'zhangsan',age:'30'}function addAge(){human.age += 1}
</script>

在<template>标签里添加内容：<button @click="addAge">修改年龄（+1）</button>

<template><div class="Person"><h2>{{ human.name }}的年龄为{{ human.age }}</h2><button @click="addAge">修改年龄（+1）</button></div>
</template>

这个时候点击按钮是无法修改数据的，因为写入的数据不是响应式数据。

步骤四：导入reactive，并修改数据的形式

在<script>标签中，从vue引入reactive：

import {reactive} from 'vue'

修改数据的形式：

let human = reactive({name:'zhangsan',age:30})

注意：age不要加引号。

{name:'zhangsan',age:'30'}只是一个对象，但用reactive()包含后，就变成了Proxy对象，Proxy()是浏览器内置的一个函数。
一个普通对象A，想要修改为响应式对象，导入reactive后，用reactive(A)包含就可以了。

步骤五：验证

最终的代码为：

<template><div class="Person"><h2>{{ human.name }}的年龄为{{ human.age }}</h2><button @click="addAge">修改年龄（+1）</button></div>
</template><script setup name="Person">import {reactive} from 'vue'let human = reactive({name:'zhangsan',age:30})function addAge(){human.age += 1}
</script><style>.Person {background-color: rgb(0, 238, 255);box-shadow: 0 0 10px;border-radius: 20px;padding: 20px;}
</style>

启动后，浏览器访问，点击修改年龄（+1）按钮，可以看到对象的年龄数值会加1：

3. 源代码

源代码可在这下载：
【Vue3】09-编写vue时，reactive的使用——源代码

其它篇章：
1.【Vue3】01-创建Vue3工程
2.【Vue3】02-Vue3工程目录分析
3.【Vue3】03-编写app组件——src
4.【Vue3】04-编写vue实现一个简单效果
5.【Vue3】05-Options API和Composition API的区别
6.【Vue3】06-利用setup编写vue（1）
7.【Vue3】07-利用setup编写vue（2）-setup的语法糖
8.【Vue3】08-编写vue项目时，ref的使用（1）
合集篇：
1.【Vue3】创建并运行一个简易的Vue3项目
2.【Vue3】编写vue实现一个简单效果，并使用setup糖简化代码