【系列 1】手写vue响应式原理

向右看齐 2022-09-14 11:20 178阅读 0赞

## 手写vue响应式原理 ##

### 首先我们看看原生 vue 做了什么 ###

可见 vm 第一层与 \_data 内都能获取到 data 数据, 并且其数值都进行了 get set 响应式处理  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Iic5bKz_size_20_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][166b5de0f9b645a08049d5020cefdf0a.png]  
接下来我们动手实现 vue 的这个步骤！

### vue 响应式原理 ###

### 目录结构： ###

├── dist   // 打包存放的目录
    ├── public  // 静态资源文件
    │   └── index.html
    ├── src
    │   ├── observe
    │   │  ├── array.js  // 操作数组数据响应式
    │   │  └── index.js  // 数据响应式
    │   ├── index.js     // 导出 vue 构造函数
    │   ├── init.js      // 初始化vue状态
    │   └── state.js     // 据不同属性进行初始化操作
    ├── .babelrc         // babel打包配置
    ├── package.json
    └── rollup.config.js

[使用Rollup搭建开发环境-目录说明][Rollup_-]

### /src/index.js (导出`vue`构造函数) ###

import { initMixin} from './init';
    
    function Vue(options) { 
        this._init(options);
    }
    initMixin(Vue); // 给原型上新增_init方法
    export default Vue;

### /src/init.js (`init`方法中初始化`vue`状态) ###

import {  initState } from "./state";
    
    export function initMixin(Vue) { 
        Vue.prototype._init = function(options) { 
            const vm = this;
            vm.$options = options // 所有后续的扩展方法都有一个$options选项可以获取用户的所有选项
            // 对于实例的数据源 props data methods computed watch
            initState(vm);
        }

### /src/state.js (根据不同属性进行初始化操作) ###

这里开始对数据进行响应式处理

import {  observe } from "./observe/index";
    
    export function initState(vm) { 
        const options = vm.$options
    
        // 后续实现计算属性 、 watcher 、 props 、methods
        if (options.data) { 
            initData(vm);
        }
    }
    
    function proxy(vm, source, key) { 
        Object.defineProperty(vm, key, { 
            get() { 
                return vm[source][key]
            },
            set(newValue) { 
                vm[source][key] = newValue;
            }
        })
    }
    
    function initData(vm) { 
        let data = vm.$options.data;
        // 如果是函数就拿到函数的返回值 否则就直接采用data作为数据源
        data = vm._data = typeof data === 'function' ? data.call(vm) : data
    
        // 属性劫持 采用defineProperty将所有的属性进行劫持
    
        // 我期望用户可以直接通过 vm.xxx 获取值， 也可以这样取值 vm._data.xxx
        for (let key in data) { 
            proxy(vm, '_data', key)
        }
        observe(data)
    }

### src/observe/index.js (实现数据响应式) ###

对数据递归操作实现所有数据都响应式

import arrayPrototype from "./array";
    
    class Observer{ 
        constructor(data){ 
            // 如果是数组的话也是用defineProperty会浪费很多性能 很少用户会通过arr[1000] = 1234
            // vue3 中的 polyfill 直接就给数组做代理了
            // 改写数组的方法，如果用户调用了可以改写数组方法的api 那么我就去劫持这个方法
            // 变异方法 push pop shift unshift reverse sort splice 
            Object.defineProperty(data,'__ob__',{ 
                value:this,
                enumerable:false
            })
             // 如果有__ob__属性 说明被观测过了
            // 修改数组的索引和长度是无法更新视图的
            if(Array.isArray(data)){ 
                // 需要重写这7个方法
                data.__proto__ = arrayPrototype; 
                // 直接将属性赋值给这个对象
                // 如果数组里面放的是对象类型 我期望他也会被变成响应式的
                this.observeArray(data);
            }else{ 
                this.walk(data)
            }
        }
        observeArray(data){ 
            data.forEach(item=> observe(item)); //如果是对象我才进行观测了 
        }
        walk(data){  // 循环对象 尽量不用for in （会遍历原型链）
            let keys = Object.keys(data); // [0,1,2]
            keys.forEach(key=> {  //没有重写数组里的每一项
                defineReactive(data,key,data[key])
            })
        }
    }
    // 性能不好的原因在于 所有的属性都被重新定义了一遍
    // 一上来需要将对象深度代理 性能差
    function defineReactive(data,key,value){  // 闭包
        // 属性会全部被重写增加了get和set
        observe(value); // 递归代理属性
        Object.defineProperty(data,key,{ 
            get(){  // vm.xxx
                return value;
            },
            set(newValue){  // vm.xxx = {a:1} 赋值一个对象的话 也可以实现响应式数据
                if(newValue === value) return
                observe(newValue)
                value = newValue;
            }
        })
    }
    export function observe(data) { 
        if(typeof data !== 'object' || data == null){ 
            return ; // 如果不是对象类型，那么不要做任何处理
        }
        if(data.__ob__){ 
            // 说明这个属性已经被代理过了
            return data
        }
    
        // 我稍后要区分 如果一个对象已经被观测了，就不要再次被观测了
        // __ob__ 标识是否有被观测过
    
        return new Observer(data)
    };

### src/observe/array.js (操作数组数据响应式) ###

目的就是对数组内新增的数据再次进行观测 避免里面出现没有监听到的对象数据

<table> 
 <thead> 
  <tr> 
   <th>手写 vue 代码仓库</th> 
   <th>链接</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>GitHub</td> 
   <td>https://github.com/shunyue1320/vue-resolve/tree/vue-01</td> 
  </tr> 
  <tr> 
   <td>Gitee</td> 
   <td>https://gitee.com/shunyue/vue-resolve/tree/vue-01/</td> 
  </tr> 
 </tbody> 
</table>

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Iic5bKz_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/9dd82d82814940afa906d6cd37af61bf.png
[166b5de0f9b645a08049d5020cefdf0a.png]: /images/20220828/3261f5d2798642da962200cf0f88da55.png
[Rollup_-]: https://blog.csdn.net/qq_41614928/article/details/120476045