vue3中 ref和reactive使用上的区别

ref和reactive使用上的区别（vue3 组合式api中）

在vue3中对响应式数据的声明官方给出了ref()和reactive()这两种方式
响应式数据：是指当数据改变后，Vue 会通知到使用该数据的代码。例如，视图渲染中使用了数据，数据改变后，视图也会自动更新。

定义数据

reactive：参数必须是对象（json/arr）

# ref
const count = ref(0)

# reactive
const obj = reactive({ count: 0 })

修改数据

ref：必须加上.value。
reactive：不能改变对象本身，但可以改变内部count的值。（即使使用let定义，虽然不会报错但是页面不会有响应）

# ref
count.value = 2

# reactive
obj.count = 2

return和template中使用时，以及toRefs的使用

注意：使用toRefs时，obj里面的count与上面ref的count名称重复了，实际使用时改个名称

1. ref：

   在template中ref不需要加.value

   # return时
   return { count }
   # template
   <el-button type="primary" @click="count++" size="mini">count is: {{ count }}</el-button>
   

2. reactive：

   return { obj }
   # template
   <el-button type="primary" @click="obj.count++" size="mini">count is: {{ obj.count }}</el-button>
   

   “...”的意思，这里相当于return { count: toRefs(obj).count }

   return { ...toRefs(obj) }
   # template
   <el-button type="primary" @click="count++" size="mini">count is: {{ count }}</el-button>
   

关于如何选择

参考：
reactive和ref都是用来定义响应式数据的
reactive更推荐去定义复杂的数据类型
ref更推荐定义基本类型
ref和reactive本质我们可以简单的理解为ref是对reactive的二次包装
使用ref定义基本数据类型，ref也可以定义数组和对象。

实际上都能用，而且ref也可以去定义简单的对象和数组，也是具有响应式的，不过官方文档中有提到如果将对象分配为 ref 值，则可以通过 reactive 方法使该对象具有高度的响应式。

ps：官方文档访问速度有点慢可以自己clone下来，本地运行文档，每次运行之前，git pull更新一下就行了。中文文档仓库：https://github.com/vuejs/docs-next-zh-cn，英文文档仓库：https://github.com/vuejs/docs-next.

原文链接

https://www.yuque.com/yanmou-pupa9/hkbhdx/tvrwtl
https://zhuanlan.zhihu.com/p/268053724
https://www.jianshu.com/p/43828470de79
https://www.cnblogs.com/jinzhenzong/p/12778729.html