目 录CONTENT

文章目录

ref和reactive到底哪个更好?vue3中两种响应式数据的优缺点对比

萧瑟
2023-04-19 / 0 评论 / 28 点赞 / 1,531 阅读 / 710 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-04-19,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

在Vue3中,ref和reactive是两种创建响应式数据的方法,它们有一些区别和联系,本文将简要介绍它们的用法和特点。

ref是一个函数,它接受一个参数,可以是基本类型对象类型,返回一个包含value属性的对象。ref的作用是将基本类型转换为响应式对象,方便在模板中使用。例如:

const num = ref(10); // num是一个响应式对象,num.value是10
num.value = 20; // 改变num.value会触发视图更新

reactive是一个函数,它接受一个对象作为参数,返回一个响应式代理对象。reactive的作用是让对象的属性变成响应式的,可以在模板中直接使用。例如:

const person = reactive({name: '张三', age: 18}); 
// person是一个响应式代理对象,person.name和person.age都是响应式的
person.name = '李四'; // 改变person.name会触发视图更新

ref和reactive的区别主要有以下几点:

  • ref适合用于基本类型,reactive适合用于复杂类型(对象、数组等)

  • ref返回的对象需要通过.value访问或修改原始值,reactive返回的代理对象可以直接访问或修改原始对象的属性。

  • ref在后台调用了reactive,所以ref也可以接受对象作为参数,但这样会增加额外的开销。

  • ref返回的对象可以重新赋值,而reactive返回的代理对象不可以重新赋值,否则会丢失响应性。

ref和reactive都是Vue3提供的创建响应式数据的方法,它们各有优缺点,需要根据具体的场景和需求选择合适的方式。


weixin

28

评论区