2.0的时候使用的是Object.defineproperty()做的数据劫持
3.0的是使用proxy代理模式进行更新，可以监听数组，只不过穿得参数是一盒数组烦死返回的是对象形式

ref原理

ref官方文档说明是：接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value

import { ref } from 'vue';
const userList = ref([{ id: 1, name: '张三' }
])
console.log(userList.value.id)  //1
const refParam = ref();
console.log(refParam)     // 返回是一个RefImpl {_rawValue: undefined, _shallow: false, __v_isRef: true, _value: undefined}
//ref的参数可以是一个任意值，返回的值是当前的参数，或者是一个undefined;
并且如果你什么也不传也可以，会返回一个响应式对象但是value是undefined;

reactive

如果是一个对象，则使用做深度代理，否则直接返回

const loginForm = reactive({username: '',password: '',imageCode: '',smscode: '',
})const { password, username, smscode, imageCode } = loginFormconst params = {username,smscode,imageCode,password: encryptedPassword,grant_type: 'password',scope: 'all',}

computed 计算机属性

computed支持读写操作,不可以进行修改操作，但是我们如果想要修改这个值的话就需要使用对象形式的参数，注意{get() =>{}, set() => {}}get和set是搭配使用的，否则出错误

// 只读模式操作
const count = ref(1)
const plusOne = computed(() => count.value + 1)console.log(plusOne.value) // 2plusOne.value++ // 错误！

// 读写模式操作
const count = ref(1)
const plusOne = computed({get: () => count.value + 1,set: (val) => {count.value = val - 1},
})plusOne.value = 1
console.log(count.value) // 0

总结：
ref：用来定义基本数据类型
reactive：用来定义对象（数组）类型数据

ref： 通过 Object.defineProperty（）的 get 与 set 来实现响应式也就是数据劫持
reactive：通过使用 Proxy 来实现响应式

ref：用 ref 定义的数据，操作需要 .value
reactive ： 定义的数据，操作不需要

首先ref对比reactive，reactive只能接收一个引用对象，不可以传递普通类型的数据，比如字符串、数字等，但是ref可以，因为ref返回的是一个响应式代理对象，这个对象value值就是我们的传递参数；所以如果是想代理一个对象或者是数组还是使用reactive更合适，如果我们想要代理一个普通类型的值就需要使用ref去代理更合理；

computed与 vue2 中的 computed 配置功能一致

computed接收一个响应式的对象或者值，并且还可以对这个接收的目标进行操作，但是他本身并不是一个响应式的信息，只不过是对这个响应式的参数进行了追踪，获取和修改的操作；

watch 监听器

watch与 vue2 中的 watch 配置功能一致

import { reactive, watch } from 'vue';
// 侦听一个 getter
const state = reactive({ count: 0 })
watch(() => state.count,(count, prevCount) => {/* ... */}
)// 直接侦听一个 ref
const count = ref(0)
watch(count, (count, prevCount) => {/* ... */
})

//监视 ref 定义的多个响应式数据
let msg = ref("你好啊")let sum = ref(0)watch([sum,msg],(newValue,oldValue)=>{console.log("监听sum变了",newValue,oldValue)},{immediate:true})ps：watch 一共可以传递三个值，第一个 监视的数据，监视的行为，watch 的配置