持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情
前言：
基于第一章我们在setup 中直接定义了变量以及一些方法，那么怎么去动态的的改变他们的值呢？也就是响应式的去改变他们的值！大家可以先记一下结论 ref 处理的是基本类型的数据 reactive 处理的是对象类型的数据
一.ref
先来看这几句代码
setup () {
let name = 'zhangsan',
let age = 19
function fn() {
name = 'lisi' //这里直接对之前定义的变量进行重新赋值
age = 20
}
return {
name,
age,
fn
}
1.1 把这几行代码输出到页面你就会发现，数据没有改变，你在fn函数里面的重新赋的值更本就没有效果，那么这时候就用到 ref 这个玩意儿，使用ref包裹住你要改变的量 看下面的代码
setup () {
let name = ref('zhangsan')
let age = ref (19)
function fn() {
name.value = 'lisi'
age.value = 20
｝
1.2这就是vue3对基本数据的一种响应式展示的方式，使用了ref后，是不是有人疑问为啥要用.value的形式呢？不仿在控制台自己打印一下，因为他是个对象，而且里面检测数据改变的原理还是利用vue2里面的原理,这个对象里面有value属性，那么这个属性就是我们要改变的哪个值，所以使用ref对基本数据类型的数据进行加工以后，想要控制这个数据，那么必须得用 变量.value 的形式去操这个数据。
二：reactive 函数
2.1 先上结论 reactive 是对对象类型的数据进行加工处理的！底层是利用es6的proxy进行处理
setup () {
let obj = reactive({
name = 'zhangsan',
age = 19,
sex = 'nan'
})
function fn() {
obj.age = 99,
obj.sex = 'nv' // 因为是通过reactive()这个函数处理过的，所以这里直接可以这么对变量进行操作
｝
2.这里也可以使用ref()加工的形式 对对象数据进行操作，不过别忘记.value 就可以了
三 总结
3.1 ref 和reactive 都是vue3里面数据响应式变化的处理函数
3.2 ref 是对基本类型的数据进行加工处理 使用时要 采用变量.value 的形式进行操作
3.3 reactive 是对对象类型的数据进行操作的，直接可以使用 obj.变量的形式进行操作
3.4 ref 底层原理是利用vue2的原理 reactive 是利用es6的proxy 的原理处理的(下一章讲proxy）
