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

2021/4/24 12:55:08

本文主要是介绍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)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程