本篇文章带大家了解一下vue.js 3 中 ref 和 reactive，介绍一下ref和reactive中的区别，希望对大家有所帮助！
关键点
reactive() 只接受对象作为参数， 不支持 JS 原始类型 （String， Boolean，Number，BigInt，Symbol，null，undefined）。【相关推荐：vue.js】
ref() 会在后台调用 reactive()
立即学习“前端免费学习笔记（深入）”；
因 reactive() 支持对象，而 ref() 内部调用 reactive()，故两个方法都支持对象
但是， ref() 有一个 .value 属性可以用来重新赋值，而 reactive() 不可重新赋值（会丢失响应性）
使用场景
ref()
当数值类型是 JS 原始类型时使用 (例如 ‘string’, true, 23)
当赋值对象，且后续需要被重新赋值时 (例如一个数组 – vue.js)
reactive()
当数值类型是对象，且不需要重新赋值时使用，ref() 内部也是调用 reactive()，无需徒增开销
总结
ref() 似乎是正确的选择，因为它支持全部的对象类型，而且可以通过 .value 重新赋值。 ref() 很好，但是当你熟悉 API 之后，就知道 reactive() 开销更小，可能发现这个更能满足需求。
ref() 案例
通过使用 ref() 来初始化，但是 ref() 对需要重新赋值的对象比较友好，例如数组。
- setup() { const blogPosts = ref([]); return { blogPosts };}getBlogPosts() { this.blogPosts.value = await fetchBlogPosts();}
登录后复制
上面采用 reactive() 的话，需要属性赋值取代对象赋值。
- setup() { const blog = reactive({ posts: [] }); return { blog };}getBlogPosts() { this.blog.posts = await fetchBlogPosts();}
登录后复制
reactive() 案例
reactive() 适合对一组归属相同的数据初始化：
- const person = reactive({ name: 'Albert', age: 30, isNinja: true,});
登录后复制
上面的代码比下面的更符合逻辑
- const name = ref('Albert');const age = ref(30);const isNinja = ref(true);
登录后复制
更多编程相关知识，请访问：vue.js！！
以上就是Vue3中 ref VS reactive，浅谈它们间有何区别？的详细内容，更多请关注【创想鸟】其它相关文章！
