Vue中数据代理详解（从底层刨析）

最新推荐文章于 2024-07-25 09:51:39 发布

林多多@

最新推荐文章于 2024-07-25 09:51:39 发布

阅读量3.2k

点赞数 10

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_59816940/article/details/123877126

版权

vue 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

数据代理

在讨论数据代理之前，大家先要知道它的底层，也就是

Object.defineProperty(给哪个对象添加属性,‘添加的属性名’,{配置项})

这个翻译过来，也就是给对象定义属性，不要小巧它，它在Vue底层中是一个相当重要的角色，不论是这次要说到的数据代理，还是数据劫持，还是Vue中我们熟知的计算属性（computed）等等，都离不开它

Object.defineProperty

我们用代码演示一下，我们给一个person对象添加属性

<script>
        let person = {
            name: 'shaka',
            sex: '男'
        }
        Object.defineProperty(person, 'age', {
            value: 21
        })
        console.log(person);
</script>

在这里插入图片描述
我们毫无疑问会输出这样一个结果，那么，我们会问，为什么不直接在person里面直接写属性呢，我们先来写一下看看

<script>
        let person = {
            name: 'shaka',
            sex: '男',
            age: 21
        }

        console.log(person);
    </script>

在这里插入图片描述
我们有没有发现一个细节问题，这两个图中的age 颜色不一样，我们直接写的age属性，和别的属性是一个颜色，然而，我们在用Object.defineProperty添加的适合，age的颜色，和另外两个颜色不一样，如果没意识到的话，大家翻上去好好看一下。

那么，用Object.defineProperty添加属性，颜色不一样，代表着什么呢？
它的意思是：

用Object.defineProperty，添加的属性，是不可枚举的

什么意思呢，简单来说，就是用Object.defineProperty添加的age方法是不可被遍历的

我们来验证一下
1.普通方法添加属性

<body>
    <script>
        let person = {
            name: 'shaka',
            sex: '男',
            age: 21
        }
        // Object.defineProperty(person, 'age', {
        //     value: 21
        // })
        console.log(Object.keys(person));
        console.log(person);
    </script>
</body>

在这里插入图片描述
2.Object.defineProperty添加属性

<body>
    <script>
        let person = {
            name: 'shaka',
            sex: '男',
            // age: 21
        }
        Object.defineProperty(person, 'age', {
            value: 21
        })
        console.log(Object.keys(person));
        console.log(person);
    </script>
</body>

在这里插入图片描述
看出来区别了吧！

那么，如果我们想要遍历它怎么办？这时候，我们要借助一个配置项

enumerable : true

我们尝试一下

<body>
    <script>
        let person = {
            name: 'shaka',
            sex: '男',
            // age: 21
        }
        Object.defineProperty(person, 'age', {
            value: 21,
            enumerable: true,//控制属性是否可以枚举，默认值是false
        })
        console.log(Object.keys(person));
        console.log(person);
    </script>
</body>

在这里插入图片描述

好，这样我们就可以枚举了，但是就是加了这个配置项以后，它还是和正常的属性不同，比如，它是不可修改的
在这里插入图片描述
这时候我们引入另一个配置项

writable:true

<body>
    <script>
        let person = {
            name: 'shaka',
            sex: '男',
            // age: 21
        }
        Object.defineProperty(person, 'age', {
            value: 21,
            enumerable: true,//控制属性是否可以枚举，默认值是false
            writable: true//控制属性是否可以被修改，默认值是false
        })
        console.log(Object.keys(person));
        console.log(person);
    </script>
</body>

在这里插入图片描述

这回它就可以被修改了，现在还有一点，就是这个age属性无法被删除
在这里插入图片描述
这次我们引入下一个配置项

configurable:true

<body>
    <script>
        let person = {
            name: 'shaka',
            sex: '男',
            // age: 21
        }
        Object.defineProperty(person, 'age', {
            value: 21,
            enumerable: true,
            writable: true,
            configurable: true//控制属性是否可以被删除，默认值是false
        })
        console.log(Object.keys(person));
        console.log(person);
    </script>
</body>

在这里插入图片描述
这下，就可以进行删除了，但是Object.defineProperty还有别的配置项，这里我们就说这基本的三种

好，我们开始有新的需求
我们用另一个变量来传这个age的值
传统方式:

    <script>
        let number = 21
        let person = {
            name: 'shaka',
            sex: '男',
            age: number
        }
        console.log(person);
    </script>
</body>

在这里插入图片描述
可以正常实现是吧，但是，这样会有一个问题，我们后期修改age的值，怎么办？

我们发现改不了，这样，我们就要求助Object.defineProperty了

<body>
    <script>
        let number = 21
        let person = {
            name: 'shaka',
            sex: '男'
        }
        Object.defineProperty(person, 'age', {
            //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
            get() {
                return number
            }
        })
        console.log(person);
    </script>
</body>

在这里插入图片描述

当我们鼠标轻放到age的…的时候会出来这个英文提示
这个 getter的意思就是get这个函数的整体

这样，我们就可以对number进行更改了
在这里插入图片描述
需要注意的是，只要读取属性了，就会调用get函数！

好，既然有get了，那么就会有一个跟它相辅相成的方法：set

<body>
    <script>
        let number = 21
        let person = {
            name: 'shaka',
            sex: '男'
        }
        Object.defineProperty(person, 'age', {
            //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
            get() {
                return number
            },
            //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
            set(value) {
                console.log('有人修改了age属性，且值是', value)
                number = value
            }

        })
        console.log(person);
    </script>
</body>

可以自己输出试一下，这里我就不说了

什么是数据代理

数据代理就是：通过一个对象代理对另一个对象中属性的操作（读/写）

好，概念我们知道了，我们用一个例子比较直观地看一下

我们有两个对象，obj1，obj2，我们通过obj2来改变obj1里面的值

	<body>
		<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
		<script type="text/javascript" >
			let obj = {x:100}
			let obj2 = {y:200}

			Object.defineProperty(obj2,'x',{
				get(){
					return obj.x
				},
				set(value){
					obj.x = value
				}
			})
		</script>
	</body>

ok，这就是数据代理了，也可以说数据代理是做什么的了

Vue中的数据代理

我们先写一段简单的代码，相信大家都可以看懂

<body>

    <!-- 准备好一个容器-->
    <div id="root">
        <h2>名字：{{name}}</h2>
        <h2>地址：{{address}}</h2>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    const vm = new Vue({
        el: '#root',
        data: {
            name: 'shaka',
            address: '辽宁东北'
        }
    })
    console.log(vm);
</script>

在这里插入图片描述
我们发现Vue实例上就有了address，name这两个属性，我们思考一件很关键的事情，这两个属性，是怎么加上去的
是不是就是Object.defineProperty，发挥了作用，一旦调用了的话，是不是Object.defineProperty中的get方法开始起作用了，
当我们给属性赋值的时候，是不是就是调用了Object.defineProperty中的set方法呢
思考一下这个问题，跟上面的知识串联一下，就明白了
在这里插入图片描述
我们读取name，getter就会工作，就会把data.name读取出去

如果有人去改这个name，setter就会工作，就会把data.name给改掉
在这里插入图片描述
说了这么多，这个数据绑定究竟有什么作用呢？

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

什么意思呢？就是说，我咋没看出来哪里方便了呢？
那么我再引出Vue中数据代理的原理：

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

还是不明白？那么我带着大家演示一下，没有这个数据代理，我们会是什么情况

<body>
    <!-- 
    1.Vue中的数据代理：
    通过vm对象来代理data对象中属性的操作（读/写）
    2.Vue中数据代理的好处：
    更加方便的操作data中的数据
    3.基本原理：
    通过Object.defineProperty()把data对象中所有属性添加到vm上。
    为每一个添加到vm上的属性，都指定一个getter/setter。
    在getter/setter内部去操作（读/写）data中对应的属性。
    -->
    <!-- 准备好一个容器-->
    <div id="root">
        <h2>名字：{{_data.name}}</h2>
        <h2>地址：{{_data.address}}</h2>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    const vm = new Vue({
        el: '#root',
        data: {
            name: 'shaka',
            address: '辽宁东北'
        }
    })
    console.log(vm);
</script>

看出区别了吗？
在这里插入图片描述
这里的书写是不是不一样了？

为什么没有数据绑定会这样呢？那么我反问大家，为什么你会在这个插值里面直接写name和address呢？
你看我直接调data上的这两个属性有意义吗
在这里插入图片描述
也就是说，我们无法直接调用data里面的值
但是Vue实例中给我们定义了一个 _data 的属性

在这里插入图片描述

我们可以通过vm._data.name或者vm.name来调用
在这里插入图片描述
但是如果我们有数据代理的话： 通过Object.defineProperty()把data对象中所有属性添加到vm上。也就是我们看到的name和address
每次我们调用或者修改的时候，都会通过Object.defineProperty中的getter和setter
所以我们就在插值里直接写name和address就行了，所以，Vue中数据代理的好处：