ref 和 reactive 区别
ref
和 reactive
都是用来定义响应式数据的。
ref
允许我们创建一个任意类型的响应式的ref对象,在使用时需要带上.value
在模板中使用ref对象时,假如ref位于顶层,就不需要使用value,它会自动解包
但如果ref对象是作为一个属性声明于对象之中,在模板中进行运算时仍然要使用.value
通俗理解 ref
和 reactive
都是用来定义响应式数据的 reactive更推荐去定义复杂的数据类型 ref
更推荐定义基本类型
ref
和 reactive
本质我们可以简单地理解为ref是对reactive的二次包装, ref定义的数据访问的时候要多一个.value
使用ref
定义基本数据类型,ref
也可以定义数组和对象
ref
操作数据需要.value
,template
模板中不需要
reactive
都不需要.value
用 reactive()
创建的响应式对象,整个对象是响应式的,而对象里的每一项都是普通的值,当你把它用展开运算符展开后,整个对象的普通值都不是响应式的
而用 ref()
创建的响应式的值,本身就是响应式的,并不依赖于其他对象
所以需要展开 reactive()
创建的响应式对象,又不想让他们失去响应式特点的时候,就需要用 toRefs()
将它进行转换
通常使用reactive()来创建一个响应式的对象或数组,这样的对象或数组状态都是默认深层响应式的,无论嵌套多深,都能跟踪到。
但他也有局限性,就是只对 对象类型有效,对基本数据类型无效
并且假如用一个新对象替换了原来的旧对象,那么原来的旧对象会失去响应性
两者区别:
1、ref
多用来定义基本数据类型(也可以定义对象,内部会自动通过reactive
转为代理对象),而 reactive
只能用来定义对象数组类型
2、ref
操作数据需要.value
,reactive
操作数据不需要.value
3、ref
通过Object.defineProperty()
的get和set来实现响应式, reactive
通过Proxy来实现响应式,并通过Reflect
操作源对象内部的数据