浅谈vue3的Reactivity API和Composition API

---

Reactivity API

响应式数据

vue3的响应式系统是脱离组件的，下面的代码可在js文件中直接执行。

reactive

reactive可以使数据变成响应式。

import {
   reactive} from 'vue'
//本质上,下面的代码等于new Poxy({ count: 0 })
const obj = reactive({
    count: 0 })

当只需要只读的代理，可以使用readonly，任何被访问的嵌套 property 也是只读的。

import {
   readonly} from 'vue'
const obj = readonly({
    count: 0 })

readonly也可以传入代理，返回新的代理，新的代理不可修改，新代理与传入的代理是不相同的。

import {
   reactive,readonly} from 'vue'
const obj = reactive({
    count: 0 })
const newObj = readonly(obj)

reactive和readonly不可以传入基本数据。

ref

我们知道Proxy只能代理对象，当我们需要代理基本数据时，我们可以使用ref。（ref啥都可以传）

import {
   ref} from 'vue'
const count = ref(0)
const newRef = ref(count)

console.log(count.value) //0
console.log(newRef.value) //0
console.log(newRef === count)