标签：Vue val ob value 响应 observe key import 源码

对象的响应式

• 目录结构：
  

• 执行关系：
  

• 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,val,ob,value,响应,observe,key,import,源码
来源： https://blog.csdn.net/TL18382950497/article/details/116086419

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。