Vue3中的ref和reactive相关内容以及实现原理。
第一,它们都是用来定义响应式数据的:
ref用来处理基本类型数据
import {ref} from 'vue'
const count = ref(0)
reactive用来处理对象或数组
Copy code
import {reactive} from 'vue
const user = reactive({
name: 'John',
age: 20
})
第二,原理层面它们的区别:
- ref内部通过一个RefImpl类封装值,并用getter/setter实现响应式
- reactive内部通过使用Proxy代理对象来实现对属性的追踪
第三,使用层面它们的主要区别是:
-
ref定义的值在模板中需要解构 reactive定义的值可以直接使用
如果将ref在reactive中使用,它会自动解套,所以可以灵活组合使用
总结: -
ref更适合基本类型数据,reactive更适合对象
原理上ref用类封装,reactive用Proxy代理
使用上可以根据需要选择,也可以二者组合
以上从定义、原理和使用层面详细解释了ref和reactive
