【Vue3】ref与reactive详解

Vue3中通过引入ref与relactive属性来实现数据的响应式
引入方式：import {ref,relactive} from 'vue'

ref

对于基本数据的响应式，我们要通过ref属性进行封装:
基本数据的响应式原理还是用object.defineProperty通过给每个属性添加getter和setter对数据进行劫持处理。

let name = ref('张三');
let age = ref(18);

在JS内想要获取修改定义的数据时需要通过×××.value进行获取，例如：

function getData(){
	name.value='李四';
	age.value=20;
}

在模板内则可以直接填写属性，例如：

<h1>姓名{{name}}</h1>
<h1>年龄{{age}}</h1>

reactive

对于对象等引用数据的响应式我们需要用relactive进行封装，如果用ref进行封装，则Vue会自动将ref转化成relactive:
在Vue3中对引用数据类型的响应式处理是通过es6的proxy与reflect，（用reflect可以避免重复使用try catch）进行判断对数据进行拦截处理。relactive定义的响应式是深层次的

//对象的响应式
let job = reactive({
	type:'前端工程师',
	salary:'10k'
});
//数组的响应式
let hobby = reactive(['抽烟','喝酒','烫头']);