vue3 reactive和ref的区别

定义角度来看

• ref用来定义：基本类型数据。

• reactive用来定义：对象（或数组）类型数据。

• 备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。

const isActive = ref(false)
 
console.log(isActive .value) // false

const person = reactive({
name:'zhang',
age: '18'
})

 原理角度对比

•  ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。

• reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。

使用角度来看：

• ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。

• reactive定义的数据：操作数据与读取数据：均不需要.value。

isActive.value=true

 

person.name="笨笨"