vue2和vue3的数据双向绑定小测试

最新推荐文章于 2024-09-16 20:08:29 发布

小样还想跑

最新推荐文章于 2024-09-16 20:08:29 发布

阅读量99

点赞数

分类专栏： vue html js 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_45356397/article/details/127617011

版权

js 同时被 3 个专栏收录

24 篇文章 0 订阅

订阅专栏

vue

23 篇文章 0 订阅

订阅专栏

html

23 篇文章 0 订阅

订阅专栏

 const person = {
                name: 'xiaoyang',
                age: 12,
            };

            // 1. vue2的属性劫持
            let p = {};
            Object.defineProperty(p, 'name', {
                configurable: true,
                get() {
                    console.log('读取了name属性');
                    return person.name;
                },
                set(value) {
                    console.log('设置了name属性');
                    person.name = value;
                },
            });

            // 2. vue3的属性代理
            const p = new Proxy(person, {
                get(target, prop) {
                    console.log(`有人读取了${prop}属性`);
                    // return target[prop]
                    return Reflect.get(target, prop);
                },
                set(target, prop, value) {
                    console.log(`有人设置了${prop}属性`);
                    // target[prop] = value;
                    return Reflect.set(target, prop, value);
                },

                defineProperty(target, prop) {
                    // return delete target[prop]
                    return Reflect.deleteProperty(target, prop);
                },
            });
    ```