【手写vue3组合式API：shallowRef和ref】

最新推荐文章于 2024-05-30 11:27:58 发布

程序猿阿嘴

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量215

点赞数

分类专栏：前端 vue.js javascript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/aniudunaichiji/article/details/125866978

版权

前端同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

javascript

9 篇文章 0 订阅

订阅专栏

vue.js

8 篇文章 2 订阅

订阅专栏

function shallowRef(target) {
    return {
        //保存target数据
        _value: target,
        // 通过get vavlue 的方式，在外部可以通过.value访问到数据
        get value() {
            console.log('劫持到了读取数据');
            return this._value
        },
        set value(val) {
            console.log('劫持到了修改数据,准备更新');
            this._value = val
        }
    }
}

// 定义一个ref函数,注意：如果传入的是对象是需要借助reactive进行处理的
function ref(target) {
    // 借助reactive进行处理的
    if (target && typeof target === 'object') {
        target = reactive(target)
    }
    return {
        //保存target数据
        _value: target,
        // 通过get vavlue 的方式，在外部可以通过.value访问到数据
        get value() {
            console.log('劫持到了读取数据');
            return this._value
        },
        set value(val) {
            console.log('劫持到了修改数据,准备更新');
            this._value = val
        }
    }
}

		//测试
	
        const ref1 = shallowRef({
            name: '小米',
            car: {
                color: 'red'
            }
        })
        /*         
        console.log(ref1.value); // 劫持到了读取数据;{name: '小米', car: {…}}
        ref1.value.car = 'benchi' // 劫持到了读取数据,无法劫持到修改数据
        ref1.value = '大米' // 劫持到了修改数据,准备更新 
        */

        const ref2 = ref({
            name: '小米',
            car: {
                color: 'red'
            }
        })
        /* 
                console.log(ref2.value); // 劫持到了读取数据;Proxy {name: '小米', car: Proxy}
                ref2.value.car.color = 'green' // 劫持到了读取数据;拦截了读取数据 car Proxy {color: 'red'};拦截了修改数据或是添加属性 color benchi
        */