灌南县规划局网站理想嘉苑规划建设,那些公司做网站好,网站建设包括哪方面,艺术字设计免费生成vue3中的ref和reactive的区别 1、响应式数据2、ref3、reactive4、ref VS reactive5、往期回顾总结#xff1a; 1、响应式数据
处理响应式数据时到底是该用ref还是reactive... 响应式数据是指在 Vue.js 中#xff0c;当数据发生变化时#xff0c;相关的视图会自动更新以反映… vue3中的ref和reactive的区别 1、响应式数据2、ref3、reactive4、ref VS reactive5、往期回顾总结 1、响应式数据
处理响应式数据时到底是该用ref还是reactive... 响应式数据是指在 Vue.js 中当数据发生变化时相关的视图会自动更新以反映这些变化的特性。Vue.js 的响应式系统通过数据绑定实现了数据和视图之间的自动同步。具体来说当你在 Vue 实例中声明一个数据属性时Vue 将会将这些属性转换成响应式数据。这意味着当这些属性的值发生变化时相关的视图会自动更新以反映这些变化。 举例说明
templatediv数据a:{{ a }}/divbutton clickadd1/button
/template
script setup
let a 1;
const add () {a;console.log(a);
};
/script
style langcss scoped/style数据a点击按钮“1”数据a会增加1并且会打印当前a的值来看效果 点了n下1可是显示的a的值并没有改变但是我们可以从打印的结果发现我们的a实际上是改变了的。如果要让我们的a变成一个响应式数据也就是说a改变展示在屏幕上的a也要变化那么我们就要使用到 ref和reactive 2、ref 在 Vue 3 中ref 是一个用于创建响应式引用的函数。它接受一个初始值作为参数并返回一个包含响应式引用的对象。使用 ref 创建的值可以在模板中直接使用并且当其值发生变化时相关的 DOM 元素会自动更新。ref 通常用于创建可变的响应式值例如基本类型数据对象或数组。ref如何发挥作用的; 举例说明ref处理基本数据类型
templatediv数据a:{{ a }}/divbutton clickadd1/button
/template
script setup
import { ref } from vue;
let a ref(1)
const add () {a.value;console.log(a);
};
/script
style langcss scoped/style首先引入ref 在ref的括号中填入a的值 在修改a的值时我们需要用.value来修改 来看看我们打印出来的a是什么 在使用ref以后我们的a就变成了一个RefImpl的实例对象我们可以看到a的值储存在里面的.value属性,于是通过.value我们就可以访问到值来看看效果
这样我们a的值就是一个响应式数据了 ref处理对象类型
同样的有一名叫大C的员工点击按钮就可以给他涨工资
template员工信息div姓名:{{person.name}}/divdiv年龄:{{person.age}}/divdiv工资:{{person.salary}}/divbutton clickaddSalary涨工资/button
/templatescript setup
import {ref} from vue
let person ref({name:张三,age:18,salary:10000
})
const addSalary (){person.value.salary 1000console.log(person.value);
}
/script
style langcss scoped
/style看的出来这也是一个响应式的数据我们在处理基本数据类型修改的时候我们都是用.value来获取数据的那么这里在修改salary的值的时候不应该是 person.value.salary.value吗我们来看person.value的打印结果… 我们可以看到person.value是一个Proxy的实例对象对象上有了我们的age等属性所以不需要再接上.value了
3、reactive 在 Vue 3 中reactive 是一个函数用于将普通 JavaScript 对象转换为响应式对象。响应式对象的属性在被访问和修改时会自动触发视图的更新reactive 可以用于创建包含复杂数据结构的响应式对象如嵌套对象和数组。 reactive是不能用来处理基本数据类型的reactive处理基本数据类型来看例子:
templatediva:{{a}}/div/templatescript setupimport {reactive} from vueconst a reactive(1)/script这时我们虽然能够看到a显示但是会报警告 reactive处理对象数据类型
template员工信息div姓名:{{person.name}}/divdiv年龄:{{person.age}}/divdiv工资:{{person.salary}}/divbutton clickaddSalary涨工资/button/templatescript setupimport {reactive} from vuelet person reactive({name:张三,age:18,salary:10000})const addSalary (){person.salary 1000console.log(person);}/scriptstyle langcss scoped/style
先来看看person是什么… person是Proxy的一个实例对象到这里你就应该明白怎么访问他的值了… 并且在上面ref处理对象类型的时候.value也是一个Proxy的实例对象到这里突然意识到原来ref处理对象数据类型的时候会偷偷求助reactive… 4、ref VS reactive
1、返回值类型
ref 返回一个包含响应式基本数据类型值的对象。reactive 返回一个包含响应式对象的 Proxy 对象。 包装的数据类型ref 可以包装基本数据类型如数字、字符串、布尔值等和引用类型如对象、数组等。reactive 只能包装引用类型数据对象、数组等。 访问数据通过 ref 创建的响应式对象需要通过 .value 访问或修改其值。通过 reactive 创建的响应式对象可以直接访问和修改其属性。 应用场景ref 适用于包装单个基本数据类型或对象。reactive 适用于包装包含多个属性或复杂数据结构的对象。
其实不管是用ref还是 reactive就像是在情人节选择礼物一样有时候你需要一束精致的玫瑰ref有时候你更想要一份充满惊喜的礼物reactive。无论你选择哪个都是为了让代码更加美好让开发更加愉快 5、往期回顾 vue3 TS vite 搭建中后台管理系统完整项目 vue3 JS vant 搭建移动端H5项目完整项目 手把手教 Vue3.2ViteEcharts 5 绘制3D线条效果中国地图 总结
前端路上 | 所知甚少唯善学。 各位小伙伴有什么疑问欢迎留言探讨。
— 关注我前端路上不迷路 —
