网站建设分工方案,网站模板制作与安装教程,湖南平台网站建设公司,制作网页总结在 Vue 3 中#xff0c;响应式系统是其核心特性之一#xff0c;它使得数据的变化能够自动触发视图的更新。 官方文档#xff1a; 响应式 API#xff1a;核心 要更好地了解响应式 API#xff0c;推荐阅读官方指南中的章节#xff1a; 响应式基础 (with the API preference…在 Vue 3 中响应式系统是其核心特性之一它使得数据的变化能够自动触发视图的更新。 官方文档 响应式 API核心 要更好地了解响应式 API推荐阅读官方指南中的章节 响应式基础 (with the API preference set to Composition API) 深入响应式系统 reactive()
基本概念
作用用于创建一个响应式的对象。如果对这个对象的属性进行修改会自动触发视图的更新。可接收的数据类型只能定义对象类型的响应式数据。使用reactive()定义基本类型会报错要用ref。语法let 响应式对象 reactive(源对象)返回值一个Proxy的实例对象简称响应式对象。类型
function reactiveT extends object(target: T): UnwrapNestedRefsT使用reactive()创建对象类型的响应式数据
templatedivp姓名: {{ person.name }}/pp年龄: {{ person.age }}/p/div
/template
script setup langts
import { reactive } from vue;const person reactive({name: 张三,age: 36
})
console.log(person)// 报错类型“number”的参数不能赋给类型“object”的参数。
let count reactive(0)/script控制台打印
直接修改响应式对象的属性值会触发依赖这些属性的组件重新渲染
// 直接修改立即响应
person.name 李四
person.age 24// 使用方法调用方法后再响应
const changePerson () {person.name 李四person.age 24
}reactive()深层响应性
对象的嵌套属性也具有响应式 响应式转换是“深层”的它会影响到所有嵌套的属性。一个响应式对象也将深层地解包任何 ref 属性同时保持响应性。
templatedivpb: {{ obj.a.b }}/ppd: {{ obj.a.c.d }}/pbutton clickchangeB修改b/buttonbutton clickchangeD修改d/button/div
/template
script setup langts
import { reactive } from vue;const obj reactive({a: {b: 10,c: {d: 20}},
});
const changeB () {obj.a.b
}
const changeD () {obj.a.c.d
}
/script在这个例子中修改嵌套对象的属性也会触发响应式更新。 不管数据嵌套的有多深reactive()一定会把数据变成响应式的。
数组的响应式 对响应式数组进行添加、删除、修改等操作都会触发依赖这个数组的组件重新渲染。
templatedivulli v-foritem in personArr :keyitem.id姓名{{ item.name }} 年龄{{ item.age }} 岁/li/ulbutton clickaddPerson添加/button/div
/template
script setup langts
import { reactive } from vue;const personArr reactive([{id: 1, name: 张三, age: 17 },{id: 2, name: 李四, age: 18 },{id: 3, name: 王二, age: 16 },
]);console.log(personArr);
const addPerson () {personArr.push({ id: 4, name: 张麻子, age: 16 });
};/script控制台打印
直接赋值整个响应式对象不会触发响应式更新
let person reactive({name: 张三,age: 36,
});// 这样不会触发响应式更新
const changePerson () {person {name: john,age: 30}
}// 使用Object.assign()等方法来更新属性
const changePerson () {Object.assign(person, {name: 李四,age: 24,});
}响应式对象的属性必须在创建时存在
const person reactive({name: 王二,
});// 报错类型“{ name: string; }”上不存在属性“age”。
person.age 30; ref()
基本概念
ref()接受一个内部值返回一个响应式的、可更改的 ref 对象此对象只有一个指向其内部值的属性 .value。
作用定义响应式的变量。可接收的数据类型基本类型、对象类型的响应式数据。若ref接收的是对象类型内部其实也是调用了reactive函数。语法let xxx ref(初始值)。返回值一个RefImpl的实例对象简称ref对象或refref对象的value属性是响应式的。类型
function refT(value: T): RefUnwrapRefTinterface RefT {value: T
}ref 对象是可更改的也就是说可以为 .value 赋予新的值。它也是响应式的即所有对 .value 的操作都将被追踪。
使用 ref() 创建基本类型的响应式数据
templatedivpcount: {{ count }}/p/div
/template
script setup langts
import { ref } from vue// 在组合式 API 中推荐使用 ref() 函数来声明响应式状态
const count ref(0)
consoe.log(count) // count 是一个RefImpl的实例对象
console.log(count.value:, count.value) // count.value:0count.value 1
console.log(count.value:, count.value) // count.value:1
/script控制台打印 注意
JS中操作数据需要xxx.value但模板中不需要.value直接使用{{xxx}}。对于const count ref(0)来说count不是响应式的count.value是响应式的。
ref()深层响应性
当ref()包裹的是一个对象时对这个对象的属性进行修改也会触发响应式更新。
templatedivp姓名: {{ person.name }}/pp年龄: {{ person.age }}/pbutton clickchangePerson修改信息/button/div
/template
script setup langts
import { ref } from vue;const person ref({name: 张三,age: 36
})
console.log(person)const changePerson () {person.name 李四person.age 24
}
/script使用ref()定义一个对象类型的响应式数据页面是正常展示数据的 数据详细信息解析
RefImpl {... }这表示这是一个由ref函数创建的响应式对象的内部实现结构展示。__v_isShallow表示是否是浅层响应式这里为false说明不是浅层响应式。dep这是一个依赖收集器用于跟踪哪些部分的代码依赖于这个响应式对象。当响应式对象的值发生变化时会通知依赖它的部分进行更新。这里显示为一个包含一个ReactiveEffect的Map说明有一个依赖项。__v_isRef为true表明这是一个由ref创建的响应式引用。_rawValue存储了原始的值这里是一个包含name和age属性的对象。_value和value都是代理对象通过代理可以实现对原始对象的响应式追踪。[[Handler]]和[[Target]]是与代理对象相关的内部属性[[Handler]]是处理程序用于定义对目标对象的各种操作的拦截行为[[Target]]是被代理的原始对象。
从控制台打印的数据结构可以看出如果将一个对象赋值给 ref那么这个对象将通过 reactive() 转为具有深层次响应式的对象。
表面上它返回来的是一个RefImpl的实例对象但是在这个实例对象的_value、value属性里是 reactive() 的返回值一个Proxy的实例对象。
直接调用changePerson修改信息person没有被修改。编译器会报错
const changePerson () {// 报错类型“Ref{ name: string; age: number; }”上不存在属性“name”。person.name 李四// 报错类型“Ref{ name: string; age: number; }”上不存在属性“age”。person.age 24console.log(person)
}ref定义的数据如果要修改要用.value来更改。
const changePerson () {console.log(修改前打印person.value:, person.value)person.value.name 李四person.value.age 24console.log(person)
}可以使用Vue - Official插件自动添加.value。 ref() 与 reactive()的区别
从数据类型看 ref()用来定义基本类型数据、对象类型数据reactive()用来定义对象类型数据。 返回值类型 ref()返回值 一个RefImpl的实例对象。reactive()返回值一个Proxy的实例对象简称响应式对象。 响应式更新方式
ref()通过修改.value属性来触发响应式更新。 ref()跳过 .value属性直接修改变量的值不会出发响应式更新。
import { ref } from vue;
let person ref({name: 张三, age: 36});
const changePerson () {// 重新分配一个对象触发响应式更新person.value { name: 李四, age: 24 }// ref 跳过 .value不会出发响应式更新person { name: 李四, age: 24 }
}let count ref(0)
const changeCount () {// 可以触发响应式更新count.value ;// 不会触发响应式更新count ref(10)
}reactive()直接修改对象的属性即可触发响应式更新。
import { reactive } from vue;
let person reactive({name: 张三, age: 36});
const changePerson () {person.name 李四 // 触发响应式更新person.age 30 // 触发响应式更新
}
reactive()重新分配一个新对象会失去响应式可以使用Object.assign去整体替换。
import { reactive } from vue;
let person reactive({name: 张三, age: 36});// 不会触发响应式更新
const changePerson () {// 重新分配一个对象person { name: 李四, age: 24 }// person reactive({name: 张三, age: 36});// 与person reactive({ name: 李四,age: 24 });// 是完全不同的2个完全不同的person 根本不是同一个东西person reactive({ name: 李四, age: 24 });
}// 使用Object.assign()等方法来更新属性
const changePerson () {Object.assign(person, {name: 李四,age: 24,});
}深层响应性 reactive()可以自动保持对象的深层响应性即嵌套对象的属性修改也会触发响应式更新。对于ref()包裹的对象直接修改嵌套对象的属性可能不会触发响应式更新需要特殊处理。 使用场景 若需要一个基本类型的响应式数据必须使用ref()。若需要一个响应式对象层级不深ref()、reactive()都可以。若需要一个响应式对象且层级较深推荐使用reactive()。
