网站被黑怎么办,图片免费素材网,光明楼网站建设,南充房产网58同城学习笔记 1.ref2.reactive3.总结 1.ref
ref是 Vue 3 中用来创建响应式引用的一个函数#xff0c;通常用于基本数据类型#xff08;如字符串、数字、布尔值等#xff09;或对象/数组的单一值。
ref特点#xff1a;
ref 可以用来创建单个响应式对象对于 ref 包裹的值… 学习笔记 1.ref2.reactive3.总结 1.ref
ref是 Vue 3 中用来创建响应式引用的一个函数通常用于基本数据类型如字符串、数字、布尔值等或对象/数组的单一值。
ref特点
ref 可以用来创建单个响应式对象对于 ref 包裹的值你需要通过 .value 来访问和修改它的值在模板中Vue 会自动解包 ref 对象所以可以直接使用 count 而不需要 .value
示例
// 使用ref创建一个名为name的响应式变量初始值为yyang
const name ref(yyang)
// 将这个变量的情况输出在控制台 上
console.log(name)输出 其中的value就是变量name的值如果要想修改值得内容直接修改是不行得需要使用以下得方法
name.value xxxxx输出
2.reactive
reactive 用于创建一个响应式对象。它是针对复杂对象如对象、数组、Map、Set 等设计的。reactive 会自动使整个对象变成响应式。
reactive特点
reactive 适用于对象或数组包括嵌套对象和数组可以让整个对象变为响应式不需要通过 .value 来访问值直接使用对象的属性进行操作reactive 返回的是一个代理对象所有对这个对象的操作都会自动追踪和反应
示例
// 使用 reactive 创建了一个包含用户信息姓名和年龄的响应式对象 state
const state reactive({user: {name: yyang,age: 18}
})
// 通过 console.log 打印出 state.user即显示 user 对象的内容
console.log(state的信息, state.user)输出 如果需要更新属性比如更新name为bobo只需要这样
state.user.name bobo;3.总结
何时使用 ref 或 reactive
ref 适用于 基本类型 和 需要包装为响应式的单一对象例如
用来存储数字、字符串、布尔值等。如果只是管理一个简单的状态比如计数器。
reactive 适用于 复杂对象 或 多个相关的属性例如
用来存储一个包含多个属性的对象或者是包含多个元素的数组。当需要修改和操作复杂数据结构时reactive 更加方便。
总结
ref 更适合简单的值和对基本数据类型的响应式处理需要 .value 来访问。reactive 更适合处理对象和数组等复杂数据结构可以直接操作对象的属性。
