Vue数据动态代理机制的实现以及响应式与数据劫持

yqd666

已于 2024-06-29 20:39:50 修改

阅读量1.1k

点赞数 22

文章标签： vue.js javascript 前端

于 2024-06-09 09:56:05 首次发布

本文链接：https://blog.youkuaiyun.com/y516369/article/details/139550491

版权

文章目录

1.Object.defineProperty()
2.数据代理机制的实现
3.响应式与数据劫持
- 3.1什么是响应式？
- 3.2 Vue 的响应式是如何实现的？

1.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配置项都不能写

<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方法执行了