关于 ref 和 reactive

Question

老师您好，我看定义 opacityStyle 的时候，用

const opacityStyle = ref({ opacity: 0 })
// const opacityStyle = reactive({ opacity: 0 })

然后用的时候

opacityStyle.value = { opacity }
// opacityStyle.opacity= { opacity }

也能实现一样的操作，那 ref 跟 reactive
有啥性能 或者别的方面的不同之处吗？
就是什么时候应该用 ref ，什么时候用 reactive

我的理解是，简单的数据，比如字符串，数组，还有简单结构的对象
用 ref
如果是相对复杂结构的对象，比如对象里面还有对象
用 reactive

不知道这样理解对不对

Answer 1

呀呀呀亚歌 2020-05-31 17:17:35

官网文档就是这样写的，如果是复杂的结构建议使用reactive，基本类型是不可以使用reactive的，如果用的话是会报错的，具体的话可以看下文档，不过也提供了对应的API进行转换

https://composition-api.vuejs.org/zh/api.html

• 提问者 Arafat #1

  嗯呐～谢谢啦
  文档确实写的很清楚哈哈
  不过
  “如果传入 ref 的是一个对象，将调用 reactive 方法进行深层响应转换。”
  意思是 ref 比较 万能？

• 呀呀呀亚歌 回复 提问者 Arafat #2

  你可以用，但是我昨天写代码的时候总是忘记ref取值用.value，然后一直错误找不出，hhh
  不过还是什么api做什么事吧

• 提问者 Arafat 回复 呀呀呀亚歌 #3

  嗯嗯～每次都得取 value 确实挺麻烦的
  （可能老了越来越懒