Vue3的响应式原理实现

1. 首先Vue3.0框架 不能在像Vue2.0看做一个项目。Vue3.0的管理模式采用monorepo，源码分为一个个单独的包进行管理， 这些独立的包本身就是一个完成的功能实现

2. 包的安装

   • npm i @vue/reactivity -D

3. reactivity的使用

  import { reactive } from '@vue/reactivity';
  const state = reactive({
     name: 'xiaoming',
     age: 30,
     info: {
        job: 'teacher',
        students: [
            {
              id:1,
              name: '小张'
            },
            {
              id:2,
              name: '小王'
            }
         ]
     }
     hobby: ['piano', 'travel', 'movie']
  })
  
  console.log(state)

- 执行结果为
![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3862844944104f6895d3086d04796f90~tplv-k3u1fbpfcp-watermark.webp)
- 不管是深层次数组还是对象都是用了proxy进行代理，可以响应式获取和设置数据

4. reactive的源码实现 1. 文件目录

 2. 代码实现
     - index.js
   ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0f107fee58204991aec62f9e33d7ca37~tplv-k3u1fbpfcp-watermark.webp)
 3. reactive.js
 
    ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b7518d33e6b945148ff0057c97cfba37~tplv-k3u1fbpfcp-watermark.webp)
 4. mutableHandler的实现 定义一个代理的对象
  ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e3c0b7c18c5448998f7932b2825a616c~tplv-k3u1fbpfcp-watermark.webp)
 5. utils.js 主要实现的是对象和属性的校验功能
   ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c8d5832322ff4b578978eafb0a4b968d~tplv-k3u1fbpfcp-watermark.webp)

5. Vue3.0的响应式原理和Vue2.0的对比 1. Vue3.0的响应式原理： 1. 使用了Proxy对象进行代理, 解决了Vue2.0对象使用Object.defineProperty深层递归迭代增加getter和setter属性属性性能问题 2. 同时Vue3 proxy可以实现数组的代理 不用单独像Vue2.0使用数据劫持重写数组的7中方法来实现响应式原理, 而且解决了数组索引和数组length的响应式问题 3. Vue3.0 Proxy的性能高 实现响应式原理简单，但是具有EsModule实现 兼容性不是很好