Vue3.0—reactive函数及响应式原理

## 3.reactive函数

- 作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用```ref```函数）

- 语法：```const 代理对象= reactive(源对象)```接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）

-reactive定义的响应式数据是“深层次的”。

- 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

## 4.Vue3.0中的响应式原理

### vue2.x的响应式

- 实现原理：

-对象类型：通过```Object.defineProperty()```对属性的读取、修改进行拦截（数据劫持）。

-数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。

```js

    Object.defineProperty(data, 'count', {
        get () {}, 
        set () {}
   })

```

- 存在问题：

-新增属性、删除属性, 界面不会更新。

-直接通过下标修改数组, 界面不会自动更新。

### Vue3.0的响应式

- 实现原理:

-通过Proxy（代理）: 拦截对象中任意属性的变化,包括：属性值的读写、属性的添加、属性的删除等。

-通过Reflect（反射）: 对源对象的属性进行操作。

- MDN文档中描述的Proxy与Reflect：

- Proxy：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

-Reflect：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

```js

      newProxy(data, {
        // 拦截读取属性值
          get (target, prop) {
            return Reflect.get(target, prop)
         },
          // 拦截设置属性值或添加新属性
          set (target, prop, value) {
            return Reflect.set(target, prop, value)
         },
          // 拦截删除属性
          deleteProperty (target, prop) {
            return Reflect.deleteProperty(target, prop)
         }
     })
     
      proxy.name = 'tom'   

```

//模拟Vue3中实现响应式
            //#region 
            const p = new Proxy(person,{
                //有人读取p的某个属性时调用
                get(target,propName){
                    console.log(`有人读取了p身上的${propName}属性`)
                    return Reflect.get(target,propName)
                },
                //有人修改p的某个属性、或给p追加某个属性时调用
                set(target,propName,value){
                    console.log(`有人修改了p身上的${propName}属性，我要去更新界面了！`)
                    Reflect.set(target,propName,value)
                },
                //有人删除p的某个属性时调用
                deleteProperty(target,propName){
                    console.log(`有人删除了p身上的${propName}属性，我要去更新界面了！`)
                    return Reflect.deleteProperty(target,propName)
                }
            })