学生个人网站布局,微信对接网站群,建设部法律法规网站,重庆市工程建筑造价信息网声明响应式数据
一、 组合式API
1.1 ref()
ref() 函数#xff0c;可以创建 任何数据类型 的 响应式数据#xff1b;#x1f53a;注意#xff1a; 当值为 对象类型 时#xff0c;会用 reactive() 自动转换它的 .value#xff1b; ref 函数的内部实现依赖于 reactive 函…声明响应式数据
一、 组合式API
1.1 ref()
ref() 函数可以创建 任何数据类型 的 响应式数据注意 当值为 对象类型 时会用 reactive() 自动转换它的 .value ref 函数的内部实现依赖于 reactive 函数 在 script 中 使用值 的时候需要 添加 .value 的后缀在 模板中 使用 ref申明 的 响应式数据可以 省略 .value 使用场景 基本数据类型数组 示例展示script setup// 引入 ref 函数来声明响应式对象import { ref } from vue// 使用 ref 函数来声明原始类型的数据源具备响应式let account ref(Abc)// 更改账号控制台查看最新值function changeAccount() {// 通过 ref 函数声明的响应式数据需要使用 .value 来获取数据的值account.value console.log(account)}// 使用 ref 函数来声明对象类型的数据源具备响应式let emp ref({salary: 7000,name: Jack})// 更改员工薪资控制台查看最新值function changeEmpSalary() {// 通过 ref 函数声明的响应式数据需要使用 .value 来获取数据的值emp.value.salary 100console.log(emp)}
/scripttemplateh1账号{{ account }}/h1button clickchangeAccount点我更改账号/buttonhrh1员工{{ emp }}/h1button clickchangeEmpSalary点我更改员工薪资/button
/template1.2 ractive()
reactive() 函数它可以定义一个 引用数据类型 成为 响应式数据Object、Array、Set、Map使用场景 Object 注意 使用的时候 不能 对数据进行 普通解构解构出来的数据 不具备响应式 如果需要进行解构需要使用特殊的函数 对 string、number、boolean 等这样的 原始数据无效 示例展示script setupimport { ref, reactive, toRef, toRefs } from vue;// NOTE ref - 使用 - 将基本数据类型转换成响应式数据let account ref(123456)// NOTE reactive - 使用 - 将引用数据类型转换成响应式数据let info reactive({name: 奥特曼,age: 22})// NOTE 将 info 进行解构查看解构后的数据是否具有响应式// NOTE 结论使用 reactive 将引用数据类型转换成响应式数据的时候不能对其进行解构因为解构出来的数据不具备响应式let { name, age } infofunction changeAccount() {account.value}function changeInfo() {info.age}function changeName() {name 1}function changeAge() {age}/scripttemplateh3 {{ account }} /h3button clickchangeAccount 改变数字的值 /buttonbrh3 {{ info }} /h3button clickchangeInfo 改变对象的值 /buttonbrh3 {{ name }} /h3button clickchangeName 改变name的值 - 解构 /buttonbrh3 {{ age }} /h3button clickchangeAge 改变age的值 - 解构 /button
/template效果展示
1.3 toRef()
toRef()转换 响应式对象 中 某个属性 为 单独响应式数据并且 值是关联的语法import { toRef } from vue
let 新变量名 toRef(要转换的对象名, 要转换对象中的属性名)注意 使用 toRef() 的前提 是对象必须被 reactive() 转换成响应式了要使用解构之后的数据需要添加 .value 的后缀toRef() 转换响应式数据包装成对象value存放值的位置 使用场景 有一个响应式数据但是模板中只需要使用其中一项数据 示例展示 基于 1.4.2 代码对 info 对象中的 某个属性 进行 解构// NOTE 将 info 进行解构查看解构后的数据是否具有响应式
// NOTE 结论使用 reactive 将引用数据类型转换成响应式数据的时候不能对其进行解构因为解构出来的数据不具备响应式
// let { name, age } info// NOTE 使用 toRef 对 info对象 的 某个属性 进行解构并转换成响应式数据
let name toRef(info, name)
let age toRef(info, age)function changeName() {console.log(name)// 添加 .value 后缀才会生效name.value 1
}const changeAge () {// NOTE 对象数据格式console.log(typeof age)// NOTE 数字console.log(typeof age.value)// 添加 .value 后缀才会生效age.value
}效果展示 可以看到 使用 toRef() 解构之后的数据是一个Objectvalue 存放数据
1.4 toRefs()
toRefs() 将一个响应式数据转换为一个普通对象这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的转换 响应式对象 中 所有属性 为 单独响应式数据对象 成为 普通对象并且 值是关联的 toRefs() 可以 批量解构数据并保持响应式对象成为普通对象:const obj reactive({ a: 1});
const obj1 toRefs(obj);注意 使用 toRefs() 的前提 是对象必须被 reactive() 转换成响应式了要使用解构之后的数据需要添加 .value 的后缀toRefs() 转换响应式数据包装成对象value存放值的位置 使用场景剥离响应式对象解构 / 展开想使用响应式对象中的多个或者所有属性为响应式数据示例展示 基于 1.4.2 的代码对 info 对象的 所有属性 进行 解构 // NOTE 使用 toRef 对 info对象 的 某个属性 进行结构并转换成响应式数据
// let name toRef(info, name);
// let age toRef(info, age);// NOTE 使用 toRefs 将对象的所有属性进行解构此时该对象是个普通对象所有的值具有响应式
const info1 toRefs(info);
let { name, age } toRefs(info);
// 以上两种方式使用的时候都需要添加 .value 的后缀
/**
* info1.nmae.age 1
* age.value 1
**/效果展示
// 这块还不是太清楚还要我自己瞎鼓捣一会
// 如果是这种写法
let info1 toRefs(info)
// 1. 不改变 info1 里面数据的时候改变 info 数据info1数据也会同步发生变化
// 2. 改变 info1 里面某个属性的数据// info 对应属性的数据不会发生变化视图上info1展示的信息不会立即发生变化// 只有当info数据改变的时候只要有一个属性改变info1就会展示这次修改的数据info1才会展示这次修改之后的数据// 再次改变 info 里面对应属性的数据info1里面对应属性的数据不会发生改变
// 新增方法const changeAge1 () {console.log(info1)info1.age 456}
// 新增结构
h3 {{ info1 }} /h3
button clickchangeAge1 改变info1-age的值 /button二、 选项式API的响应式数据
可用 data 选项来声明组件的响应式状态该 data 选项的值应为返回一个对象的函数data 函数返回对象的所有顶层属性都会被代理到组的实例既方法和生命周期钩子中的 this 上
script
export default {data: () ({// 定义数据}),methods: {// 定义方法}
}
/script
