Vue数据动态代理机制的实现

Object.defineProperty()

(1)这个方法是ES5新增的

(2)这个方法的作用是:给对象新增属性,或者设置对象原有的属性

(3)用法:Object.defineProperty(给哪个对象新增属性,'新增的属性名是什么',{给新增的属性设置相关的配置项key:value对})

补充:配置项有哪些?

①value配置项:给属性指定值

②writable配置项:设置该属性的值是否可以修改。true表示可以修改,false表示不能修改

③getter方法 配置项:不需要我们手动调用。当读取属性值的时候,getter方法被自动调用。

a.getter方法的返回值非常重要,这个返回值就代表这个属性它的值。

④setter方法 配置项:不需要我们手动调用。当修改属性值的时候,setter方法被自动调用。

a.setter方法上有一个参数,这个参数可以接收传过来的值

⑤当配置项当中有setter和getter的时候,value和writable配置项都不能写

html 复制代码
<body>
    <script>
        //  一个普通对象 
        let phone = {}
        // 临时变量 
        let temp;
        // 给上面的phone对象新增一个color属性
        Object.defineProperty(phone, 'color', {
            // value: '太空侠',
            // writable: true,
            get: function () {
                console.log('getter方法执行了');
                return temp;
            },
            set: function (val) {
                console.log('setter方法执行了');
                temp = val;
            }
        })
    </script>
</body>

数据代理机制的实现

(1)什么是数据代理机制?

通过访问代理对象的属性来间接访问目标对象的属性。数据代理机制的实现需要依靠:Object.defineProperty()方法

(2)ES6新特性:在对象中的函数/方法 :function是可以省略的

html 复制代码
<body>

    <script>
        //  目标对象 
        let target = {
            name : 'zhangsan'
        }
        // 代理对象 
        let proxy = {}
        // 如果要实现数据代理机制的话,就需要给proxy新增一个name属性
        // 注意:代理对象新增的这个属性的名字 和 目标对象的属性名要一致
        Object.defineProperty(proxy, 'name', {
            get: function () {
            //   间接访问目标对象的属性
                return target.name;
            },
            set: function (val) {
                target.name = val;
            }
        })
    </script>
</body>

(3)属性名有(...)的代表是代理对象

相关推荐
DaMu5 分钟前
Cesium & Three.js 【移动端手游“户外大逃杀”】 还在“画页面的”前端开发小伙伴们,是时候该“在往前走一走”了!我们必须摆脱“画页面的”标签!
前端·gis
非专业程序员5 分钟前
一文读懂Font文件
前端
Asort7 分钟前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer8 分钟前
什么是 React 中的远程组件?
前端·react.js
真夜8 分钟前
关于rngh手势与Slider组件手势与事件冲突解决问题记录
android·javascript·app
我是日安11 分钟前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发?
前端·vue.js
知了一笑11 分钟前
「AI」网站模版,效果如何?
前端·后端·产品
艾小码14 分钟前
用了这么久React,你真的搞懂useEffect了吗?
前端·javascript·react.js
知觉15 分钟前
实现@imput支持用户输入最多三位整数,最多一位小数的数值
前端
RoyLin15 分钟前
TypeScript设计模式:状态模式
前端·后端·typescript