接收一个普通对象然后返回该普通对象的响应式代理。等同于 2.x 的 Vue.observable()

<template>
  <p>{{state.count}}</p>
  <p>{{state.presonal.name}}  -----  {{state.presonal.age}}</p>
</template>
<script>
  import { ref, reactive } from 'vue'

  export default {
    setup() {
       const state = reactive({
          count: 0,
           presonal: {
             name: 'like',
             age: 18
           }
       })
       // 暴露给模板
       return {
       		state
       }
    }
  }
</script>

响应式转换是“深层的”：会影响对象内部所有嵌套的属性。

基于 ES2015 的 Proxy 实现，返回的代理对象不等于原始对象。

建议仅使用代理对象而避免依赖原始对象。

Object.defineProperty

大家都知道2.x 版本的响应系统采用的是 Object.defineProperty 来进行属性的拦截操作。

请注意，是对象属性的操作拦截

Object.defineProperty有缺陷的是：

1、无法检测到对象属性的新增或删除

2、不能监听数组的变化

所以我们在2.x版本新增属性必须采用 this.$set() 设置的属性才是响应式的，这个就是Object.defineProperty 的缺陷问题，至于我们在vue里面操作数组能够实现响应是因为vue帮我们额外处理了数组的方法。

Proxy

引用MDN官网的一句话：

Proxy 对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。

has()

in 操作符的捕捉器。

get()

属性读取操作的捕捉器。

set()

属性设置操作的捕捉器。

deleteProperty()

delete 操作符的捕捉器。

看一个简单的小例子：

let valitator = {
  set: function (obj, prop, value) {
     obj[prop] = value
  },
  get: function (obj, prop) {
    return obj
  }
}
let person = new Proxy({},valitator )