Vue2基础-Vue2中的数据代理（响应式原理）（HTML版）

大脑不能为空

已于 2022-07-07 14:43:00 修改

阅读量365

点赞数

分类专栏： Vue2-Vue3全套学习教程文章标签： javascript 前端开发语言 vue.js

于 2022-07-04 13:47:03 首次发布

本文链接：https://blog.csdn.net/qq_33399435/article/details/125576752

版权

Vue2-Vue3全套学习教程专栏收录该内容

41 篇文章 14 订阅

订阅专栏

一、回顾JavaScript的defineProperty方法

Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性

Object.defineProperty(object, propName, descriptor)

obj 需要定义属性的当前对象
prop 当前需要定义的属性名
desc 属性描述符

一般通过为对象的属性赋值的情况下，对象的属性可以修改也可以删除，但是通过Object.defineProperty()定义属性，通过描述符的设置可以进行更精准的控制对象属性。

1. defineProperty的基本使用

<script type="text/javascript" >
	let number = 18
	let person = {
		name:'张三',
		sex:'男',
	}

	Object.defineProperty(person,'age',{
		// value:18,
		// enumerable:true, //控制属性是否可以枚举，默认值是false
		// writable:true, //控制属性是否可以被修改，默认值是false
		// configurable:true //控制属性是否可以被删除，默认值是false

		//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
		get(){
			console.log('有人读取age属性了')
			return number
		},

		//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
		set(value){
			console.log('有人修改了age属性，且值是',value)
			number = value
		}

	})

	// console.log(Object.keys(person)) // (2) ['name', 'sex']

	console.log(person) // {name: '张三', sex: '男'}
</script>

二、什么是数据代理？

通过一个对象代理对另一个对象中属性的操作（读/写），即可称为是数据代理

<script type="text/javascript">
   let obj = {
        x: 100
    }
    let obj2 = {
        y: 200
    }
	
	// 通过obj2代理obj中属性的操作(读/写)
    Object.defineProperty(obj2, 'x', {
        get() {
            return obj.x
        },
        set(value) {
            obj.x = value
        }
    })
</script>

三、Vue中的数据代理

Vue中的数据代理：
通过 vm对象 来代理 data对象 中属性的操作（读/写）
Vue中数据代理的好处：
更加方便的操作data中的数据，简化了数据操作时的书写。
基本原理：
通过 Object.defineProperty() 把 data对象 中所有属性添加到 vm 上。
为每一个添加到vm上的属性，都指定一个 getter/setter。
在getter/setter内部去 操作（读/写） data中对应的属性。
如果Vue没有数据代理会怎么样？
在使用data中的数据时，需要this._data.xxx进行操作，光是看到就恐怖如斯。


<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: '尚硅谷',
            address: '宏福科技园'
        }
    })
</script>