智能手机网站模板,阿里巴巴做企业网站,域名主机基地,网站开发代码说明书一、前言
在Vue3中#xff0c;如果数据不是响应式数据#xff0c;当数据的值发生改变时#xff0c;页面上的数据是不会发生改变的。因此本文主要介绍Vue3中响应式数据的使用#xff0c;包括ref和reactive的基本使用。
二、ref
1、ref —— 创建基本类型的响应式数据
re…一、前言
在Vue3中如果数据不是响应式数据当数据的值发生改变时页面上的数据是不会发生改变的。因此本文主要介绍Vue3中响应式数据的使用包括ref和reactive的基本使用。
二、ref
1、ref —— 创建基本类型的响应式数据
ref 可以定义基本类型的响应式变量语法
let xxxref(初始值)返回值: 是一个RefImpl的实例对象简称ref对象或refref对象中的value属性是响应式的。其他 在JS中操作数据需要使用 xxx.value的形式但在模板中不需要用. value直接使用即可。
1引入ref
import {ref} from vue 2代码
代码解析 完整代码
templatep个人信息/pp性别{{ gender }}/pp年龄{{ age }}/pbutton clickageChange点击年龄加1/button
/templatescript setup
import { ref } from vue;// 数据
let gender ref(女);
let age ref(25);// 方法
function ageChange() {age.value 1;
}
/script结果 点击按钮响应式数据会在页面上发生变化 2、ref —— 创建对象类型的响应式数据
ref也可以创建对象类型的响应式数据。
1代码解析
ref可以定义以下类型的数据 修改ref的数据时记得.value的使用以及使用顺序 在模板中不需要使用.value 2完整代码
templatep小明的年龄是{{ info.age }} 岁/pp小明的身高是{{ info.height }} cm/pbutton clickageChange点击年龄加1/buttonbutton clickheightChange点击身高加1/buttonbr /h2星座列表:/h2ulli v-foritem in Constellation :keyitem.id{{ item.star }}/li/ulbutton clickConstellationChange点击修改第二个星座名称/button
/templatescript setup
import { ref } from vue;// 数据
let info ref({age: 20,height: 165,
});
let Constellation ref([{ id: 1, star: 双子座 },{ id: 2, star: 狮子座 },{ id: 3, star: 巨蟹座 },
]);// 方法
function ageChange() {info.value.age 1;
}
function heightChange() {info.value.height 1;
}
function ConstellationChange() {Constellation.value[1].star 处女座;
}
/script 三、reactive
1、概念
reactive只能定义对象类型的响应式数据例如
数据1
let info reactive({age: 20,height: 165,
});数据2
let Constellation reactive([{ id: 1, star: 双子座 },{ id: 2, star: 狮子座 },{ id: 3, star: 巨蟹座 },
]);而以下代码是错误的reactive不能定义基本类型的数据
let namereactive(张三)2、代码
templatep小明的年龄是{{ info.age }} 岁/pp小明的身高是{{ info.height }} cm/pbutton clickageChange点击年龄加1/buttonbutton clickheightChange点击身高加1/buttonbr /h2星座列表:/h2ulli v-foritem in Constellation :keyitem.id{{ item.star }}/li/ul
/templatescript setup
import { reactive } from vue;// 数据
let info reactive({age: 20,height: 165,
});
let Constellation reactive([{ id: 1, star: 双子座 },{ id: 2, star: 狮子座 },{ id: 3, star: 巨蟹座 },
]);// 方法
function ageChange() {info.age 1;
}
function heightChange() {info.height 1;
}
/script结果 点击按钮响应式数据会在页面上发生变化 3、注意事项
reactive重新分配一个新对象 会失去响应式可以使用object . assign去整体替换举例
原本有数据如下
// 数据
let info reactive({age: 20,height: 165,
});点击按钮对整体数据进行修改
function infoChange() {info{age: 30,height: 185,
}
}但是这样修改数据之后点击按钮数据并不会修改
而使用object . assign可以让页面的数据进行更新
function infoChange() {Object.assign(info, {age: 30,height: 185,});
}结果如下
四、总结
ref可以定义基本类型数据、对象类型数据reactive只能定义对象类型数据若需要一个响应式对象层级不深ref 、reactive 都可以若需要一个响应式对象且层级较深推荐使用reactive
