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
名称重复了,实际使用时改个名称
ref
:在template中
ref
不需要加.value
# return时 return { count } # template <el-button type="primary" @click="count++" size="mini">count is: {{ count }}</el-button>
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