模拟Vue3响应式原理

模拟Vue3响应式原理

看代码

<script>
    //    定义原始数据
    let person = {
    
    
        name: '张三',
        age: 18
    }
    // 模拟vue3中实现响应式
    let p = new Proxy(person, {
    
    
        // 读取时调用get
        get(target, propName) {
    
    
            console.log(`有人读取了p身上的${
      
      propName}属性`)
            return target[propName]
        },
        // 修改或添加时调用set
        set(target, propName, value) {
    
    
            console.log(`有人修改了p身上的${
      
      propName}属性，要去更新页面了`)
            target[propName] = value
        },
        // 删除是调用deleteProperty
        deleteProperty(target, propName) {
    
    
            console.log(`有人删除了p身上的${
      
      propName}属性，要去更新页面了`)
            return delete target[propName]
        }
    })
</script>

在控制台进行操作 如下图