阿里云搭建网站,纯静态网站制作,徐州人才网官网登录,app推广运营是做什么的合集篇#xff1a; 1.【Vue3】创建并运行一个简易的Vue3项目 2.【Vue3】编写vue实现一个简单效果#xff0c;并使用setup糖简化代码 目录refref 定义对象类型的响应式数据1. 概念理解a. 概念b. 分析2. 代码实操代码场景步骤一#xff1a;导入ref步骤二#xff1a;修改数据形… 合集篇 1.【Vue3】创建并运行一个简易的Vue3项目 2.【Vue3】编写vue实现一个简单效果并使用setup糖简化代码 目录refref 定义对象类型的响应式数据1. 概念理解a. 概念b. 分析2. 代码实操代码场景步骤一导入ref步骤二修改数据形式步骤三修改方法内数据形式步骤四验证3. 源代码ref
ref 定义对象类型的响应式数据
1. 概念理解
a. 概念
ref 不仅可以定义基本类型数据还可以定义对象类型的响应式数据。与之相比reactive只能定义对象类型的响应式数据。
b. 分析
ref虽然能够定义对象类型的响应式数据但其在底层其实还是利用了reactive。
2. 代码实操
代码场景
代码场景为利用reactive定义对象类型的响应式数据的场景
templatediv classPersonh2{{ human.name }}的年龄为{{ human.age }}/h2button clickaddAge修改年龄1/button/div
/templatescript setup namePersonimport {reactive} from vuelet human reactive({name:zhangsan,age:30})function addAge(){human.age 1}
/scriptstyle.Person {background-color: rgb(0, 238, 255);box-shadow: 0 0 10px;border-radius: 20px;padding: 20px;}
/style步骤一导入ref
原代码中导入的是reactive这里将reactive改为ref即可
import {ref} from vue步骤二修改数据形式
原代码为
let human reactive({name:zhangsan,age:30})将reactive修改为ref
let human ref({name:zhangsan,age:30})这时运行项目点击按钮是没反应的还需要修改方法内使用数据的形式。
步骤三修改方法内数据形式
原代码为
human.age 1在human后面加个.value最终script标签内容如下
script setup namePersonimport {ref} from vuelet human ref({name:zhangsan,age:30})function addAge(){human.value.age 1}
/script步骤四验证
终端中输入npm run dev后访问服务器得到以下界面点击修改年龄1按钮年龄的数据会加一 在这里插入图片描述
3. 源代码
https://download.csdn.net/download/qq_52161797/91950850 其它篇章 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编写vue1 7.【Vue3】07-利用setup编写vue2-setup的语法糖 8.【Vue3】08-编写vue项目时ref的使用1 9.【Vue3】09-编写vue时reactive的使用 合集篇 1.【Vue3】创建并运行一个简易的Vue3项目 2.【Vue3】编写vue实现一个简单效果并使用setup糖简化代码
