vue3中 ref 和 reactive 的区别介绍

ref 和 reactive 区别

refreactive 都是用来定义响应式数据的。

ref允许我们创建一个任意类型的响应式的ref对象,在使用时需要带上.value
在模板中使用ref对象时,假如ref位于顶层,就不需要使用value,它会自动解包
但如果ref对象是作为一个属性声明于对象之中,在模板中进行运算时仍然要使用.value

通俗理解 refreactive 都是用来定义响应式数据的 reactive更推荐去定义复杂的数据类型 ref 更推荐定义基本类型

refreactive 本质我们可以简单地理解为ref是对reactive的二次包装, ref定义的数据访问的时候要多一个.value

使用ref定义基本数据类型,ref也可以定义数组和对象

ref操作数据需要.valuetemplate模板中不需要

reactive都不需要.value

reactive() 创建的响应式对象,整个对象是响应式的,而对象里的每一项都是普通的值,当你把它用展开运算符展开后,整个对象的普通值都不是响应式的

而用 ref() 创建的响应式的值,本身就是响应式的,并不依赖于其他对象

所以需要展开 reactive() 创建的响应式对象,又不想让他们失去响应式特点的时候,就需要用 toRefs() 将它进行转换

通常使用reactive()来创建一个响应式的对象或数组,这样的对象或数组状态都是默认深层响应式的,无论嵌套多深,都能跟踪到。
但他也有局限性,就是只对 对象类型有效,对基本数据类型无效
并且假如用一个新对象替换了原来的旧对象,那么原来的旧对象会失去响应性

两者区别:

1、ref多用来定义基本数据类型(也可以定义对象,内部会自动通过reactive转为代理对象),而 reactive只能用来定义对象数组类型

2、ref操作数据需要.valuereactive操作数据不需要.value

3、ref通过Object.defineProperty()的get和set来实现响应式, reactive通过Proxy来实现响应式,并通过Reflect操作源对象内部的数据

你可能感兴趣的:(Vue3,ref,reactive,vue3)