vue技术之数据代理

文章目录

    • 数据代理是什么
    • 理解vue中的数据代理
    • 总结

数据代理是什么

数据代理是通过一个对象代理对另一个对象中属性的操作(读/写)。是通过definproperty方法来实现的。

为了让大家更好理解数据代理的原理,下面将举出一个小案例。
案例目的:obj对象中有一个属性x,另外还有一个对象obj2。目的是让obj2能够访问到并且能够修改这个x属性,即通过对象obj2代理对另一个对象obj中属性x的操作.

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <script type="text/javascript">
        let obj={
            x:100
        }
        let obj2={
            y:200
        }
        //给obj2中追加一个属性x
        Object.defineProperty(obj2,'x',{
            get(){
                return obj.x  //若get方法调用了,也就是想访问obj2的x,其实得到的是obj中的x
            },
            set(value){//若set方法调用了,也就是想更改obj2的x,但其实改改掉的是obj中x的值
                obj.x=value
            }
        });
    script>
    
body>
html>

当打开控制台进行效果验证,通过输入obj.x得到的值为100,输入obj2.x时得到的也是100,也就是调用了get方法,返回了obj.x的值。当我们将obj2.x的值设置为300,可以看到obj.x的值也变为300。

vue技术之数据代理_第1张图片

理解vue中的数据代理

接下来将通过一个小例子帮助大家去理解vue中的数据代理。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    
    <script src="./js/vue.js" type="text/javascript">script>
head>
<body>
    <div id="root">
        <h2>学校名称:{{name}}h2>
        <h2>学校地址:{{address}}h2>
    div>
    <script type="text/javascript">
    Vue.config.productionTip=false;//设置为 false 以阻止 vue 在启动时生成生产提示。
    
    const vm=new Vue({
        el:'#root',
        data:{
        name:'mmm',
        address:'北京'
    }
    })
    script>
body>
html>

打开控制台,可以看到vm上也存在name和 address属性。通过vm访问name时,getter开始工作,即访问的是data中的name。通过vm修改name时,setter开始工作。这说明vue中存在数据代理。vm中的name和 address代理对data中的name和 address操作。

vue技术之数据代理_第2张图片
vue技术之数据代理_第3张图片

下面将来验证两条线:(这里以name属性为例)

  1. 通过vm访问name时,getter开始工作,即访问的是data中的name。
  2. 通过vm修改name时,setter开始工作,即修改的是data中的name。

验证第一条:
当在控制台上输入vm.name时,得到的是data中name属性的值,这说明getter方法开始被调用了。

vue技术之数据代理_第4张图片

验证第二条:
在控制台中,通过修改vm.name,验证data中的name的值是否被改变,即调用了setter方法。但是我们并不能直接通过在控制台直接输入data.name来验证vm.name值改变,data.name也跟着改变,不然会报错!

解决办法:
其实vm中已经将data中的数据收集在在自身上,即vm._data
vue技术之数据代理_第5张图片
输入vm.name设置新的值,再输入vm._data.name,这时vm._data.name的值(即data中name的属性值)也跟着改变。一旦data中的数据发生改变,那么页面中用到改数据的地方也会自动更新。所以页面展示也发生变化。
vue技术之数据代理_第6张图片

总结

1. vue中数据代理的好处:
更加方便的操作data中的数据
2. 基本原理:
通过Object.defineProperty()把data对象中所有属性添加到vm上,为每一个添加vm上的属性,都指定了一个getter和setter方法。在这两个方法内部去操作(读/写)data中对应的属性。

你可能感兴趣的:(vue.js,前端,javascript)