reactive与ref
- 是Vue3的 composition API中2个最重要的响应式API
- ref用来处理基本类型数据, reactive用来处理对象(递归深度响应式)
- 如果用ref对象/数组, 内部会自动将对象/数组转换为reactive的代理对象
- ref内部: 通过给value属性添加getter/setter来实现对数据的劫持
- reactive内部: 通过使用Proxy来实现对对象内部所有数据的劫持, 并通过Reflect操作对象内部数据
- ref的数据操作: 在js中要.value, 在模板中不需要(内部解析模板时会自动添加.value)
<template>
<h2>reactive和ref的细节问题</h2>
<h3>m1: {{m1}}</h3>
<h3>m2: {{m2}}</h3>
<h3>m3: {{m3}}</h3>
<hr/>
<button @click="update">更新数据</button>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
export default defineComponent({
name: 'App',
setup(){
// 通过ref的方式设置数据
const m1 = ref('abc')
const m2 = reactive({
name: '小明',
wife: {
name: '小红'
}
})
const m3 = ref({
name: '小明',
wife: {
name: '小红'
}
})
const update = () => {
// ref中如果放入的是一个对象,那么是经过了reactive的处理,形成了一个Proxy类型的对象
console.log("m2",m2);
console.log("m3",m3);
m1.value +='==='
m2.wife.name += '==='
// m3.value.name += '==='
m3.value.wife.name += '==='
console.log("m3.value.wife",m3.value.wife); //Proxy对象
}
return {
m1, m2, m3, update
}
}
})
</script>
查看一下:
这个图验证了:ref中如果放入的是一个对象,那么是经过了reactive的处理,形成了一个Proxy类型的对象