Vue 源码学习 —— 数据响应式原理 (Vue 2.x)

对象的响应式

  • 目录结构
    Vue 源码学习 —— 数据响应式原理 (Vue 2.x)

  • 执行关系
    Vue 源码学习 —— 数据响应式原理 (Vue 2.x)

  • observe.js

import Observer from './Observer'

export default function observe (value) {
    // 如果 value 不是对象,则不处理
    if (typeof value != 'object' || !value) return

    var ob
    if (value.__ob__) {
        ob = value.__ob__
    } else {
        ob = new Observer(value)
    }
    
    return ob
}
  • Observer:
import { def } from './utils'
import defineReactive from './defineReactive'
import { arrayMethods } from './array'

// 将一个 Object 对象的每个层级都转换为响应式的
export default class Observer {
    constructor (value) {
        def (value, '__ob__', this, false)
            this.walk(value)
        }
    }
    walk (value) {
        for (let key in value) {
            defineReactive(value, key, value[key])
        }
    }
}
  • defineReactive:
import observe from './observe'

export default function defineReactive (data, key, val) {
    
    observe(val)

    Object.defineProperty(data, key, {
        enumerable: true,
        configurable: true,
        get () {
            console.log(`${key} 被访问了,是 ${val}`)
            return val
        },
        set (newVal) {
            console.log(`${key} 被修改了,是 ${newVal}`)
            if (newVal === val) {
                return
            }
            val = newVal
            observe(newVal)
        }        
    })
}
  • utils:
export function def (data, key, value, enumerable, writable) {
    Object.defineProperty(data, key, {
        value,
        writable,
        enumerable
    })
}
  • index:
import observe from './observe'

let obj = {
    a: {
        b: {
            c: {
                d: 6666
            }
        }
    }
}

observe(obj)

obj.a.b.c.d++
  • 测试效果
    Vue 源码学习 —— 数据响应式原理 (Vue 2.x)
上一篇:element-ui表格功能实现(删除选中)


下一篇:Vue重写数组