# study_data_reactive

**Repository Path**: one_pic/study_data_reactive

## Basic Information

- **Project Name**: study_data_reactive
- **Description**: Vue源码解析之数据响应式原理
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-11-02
- **Last Updated**: 2022-05-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue源码-数据响应

## README

# Vue源码解析之数据响应式原理
## 环境搭建
1. 安装webpack webpack-cli webpack-dev-server
```sh
npm install -D webpack webpack-cli webpack-dev-server
```

2. webpack.config.js 配置
```javascript
const path = require('path');

module.exports = {
    // 环境
    mode: 'none',
    // 入口
    entry: './src/index.js',
    // 出口
    output: {
        // 虚拟路径，不会真实生成
        publicPath: '/xuni/',
        // 打包出的文件名
        filename: 'bundle.js',
    },
    // 配置webpack-dev-server
    devServer: {
        // 端口号
        port: 8080,
        // 不压缩
        compress: false,
        // 静态资源文件夹
        static: {
            directory: 'www'
        },
    }
};
```

## getter setter死循环问题
```javascript
export default function defineReactive(data, key) {
    Object.defineProperty(data, key, {
        // 可配置
        configurable: true,
        // 可枚举
        enumerable: true,
        // getter
        get() {
            console.log('尝试获取-->', key);
            // 此时会陷入死循环 obj.a会触发getter函数 getter函数中又存在 obj.a读取操作 所以会无限自调用直至爆栈
            return data[key]
        },
        // setter
        set(newVal) {
            console.log('尝试修改-->', key, newVal);
            // 此时会陷入死循环 obj.a = xxx 会触发setter函数 setter函数中又存在obj.a = xxx 赋值操作 所以会无限自调用直至爆栈
            data[key] = newVal
        },
    })
}
```