当前位置：首页 > news >正文

跟着尚硅谷学vue-day3

news 来源：原创 2025/5/10 6:06:37

前言：数据代理和vue中的数据代理

1.Object.defineProperty(person,‘age’,{value:xx})

特征1：不可枚举性

name和sex是深色的，代表可以被枚举（遍历），age是浅色的，代表不能被枚举

将enumerable设置成为true,就可以进行枚举，console.log(Object.keys(person))，可以看到列表key

特征2：修改值

将writable设置为true，可以进行修改值。

特征3：删除值

将configurable设置为true，控制属性是否可以被删除，默认值是false

2.业务需求，如何将nubmer的值和person的age一样

如果用let person这种写法的话,let person ={ name:'xiaof',sex:'女',age:number}

number的值改变了，但是person的值没有改变。因为代码是顺序执行的。

如果想要实现这个业务需求，就需要像上图一样，将number修改，然后给person的age赋值，既可以修改了。但是很麻烦，这个就突出了代理的定义。现在就可以使用代理。

 <script type="text/javascript">
        let number = 19;
        let person ={
            name:'xiaof',
            sex:'女'
        }
        Object.defineProperty(person,'age',{
            // value:18,
            // enumerable:true,
            // writable:true,
            // configurable:true
            get:function(){
                return number
            },
            set:function(value){
                number = value
            }
        })
        console.log(person)
        console.log(Object.keys(person))
    </script>

1.get和set使用

可以看到age的值为get方法返回的值

修改number值，通过set方法可以自动实现person的age属性值的修改。

2.结论

当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值

当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值。

3.Vue中的数据代理

数据代理的定义为通过一个对象代理对另一个对象中属性的操作(读/写)
1.通过对象来代理data对象中属性的操作(读/写)

2.Vue中数据代理的好处:更加方便的操作data中的数据

3.基本原理:
通过object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作(读/写)data中对应的属性。

vm._data通过监听实现页面实时修改

在Vue当中,new Vue配置项的data中的变量和值都被存储在了vm上

1.get和set证明

数据代理是通过get获取值，通过set修改值，get就是直接点击省略号的内容就是get方法被调用

2.vm._data

想要证明setter过程，需要先证明_data可以控制页面上的变量实时更新。修改vm._data.name，可以发现页面进行修改。实际上{{_data.name}} = {{name}}

3.图示

配置项的 data 被赋值给 vm._data：

在 Vue 实例化时，用户提供的 data 对象会被赋值给 Vue 实例的一个内部属性 _data。

将 vm._data 的值赋值给 vm：

Vue 会通过 Object.defineProperty 或其他方法（如代理）将 vm._data 的属性代理到 vm 上，使得你可以通过 vm.name 访问 vm._data.name。

修改 vm.name：

当你通过 vm.name 修改值时，实际上是通过代理访问和修改 vm._data.name。

通过 Object.defineProperty 的 set 修改 vm._data：

在 Vue 2.x 中，Object.defineProperty 被用来拦截对 vm._data 属性的设置操作。

vm._data 值修改导致 vm 的属性值变化，并且页面实时更新：

当 vm._data 的某个属性被修改时，Vue 的响应式系统会检测到这一变化，并通知所有依赖于该属性的组件或计算属性进行更新，从而实现页面的实时更新。