vue的数据代理原理, 和Object.defineProperty详解

爱菜鸟高高飞

已于 2022-05-25 15:13:41 修改

阅读量150

点赞数

分类专栏： vue 每日一更文章标签： vue.js

于 2022-05-25 15:02:20 首次发布

本文链接：https://blog.csdn.net/u010074478/article/details/124965955

版权

vue 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

每日一更

9 篇文章 0 订阅

订阅专栏

Vue数据代理

问题： vue的data中的属性name为啥有直接用vm.name访问和设置?

const vm = new Vue({
	el:'#root',
	data:{
		name:'张三',
		address:'北京市'
	}
})
console.log(vm.name) 
//这个vm.name其实就从vm._data.name代理过来的, 注意不是vm.data.name, 注意下划线.
//vm._data.name 以是在data中的name

vue数据代理原理

1.Vue中的数据代理：
   通过vm对象来代理data对象中属性的操作（读/写）
2.Vue中数据代理的好处：
   更加方便的操作data中的数据
3.基本原理：
   通过Object.defineProperty()把data对象中所有属性添加到vm上。
   为每一个添加到vm上的属性，都指定一个getter/setter。
   在getter/setter内部去操作（读/写）data中对应的属性。

Object.defineProperty详解

现抛结论: Object.defineProperty 只能用于IE9+, 可以定义对象的属性,可以控制属性的操作, 如能否删除, 修改, 是枚举值等, 可以改变对象的属性值,或其它变量. 框架常用此方案绑定数据 ,如vue, 这也是vue为啥只能IE9+

下面vue.js代码片段

 
/**
   * Define a property.
   */
  function def (obj, key, val, enumerable) {
    Object.defineProperty(obj, key, {
      value: val,
      enumerable: !!enumerable,
      writable: true,
      configurable: true
    });
  }

Object.defineProperty方法接收三个参数:
1.属性所在的对象
2.属性的名字
3.一个描述符对象 (一些属性和setter,getter)

1.get：在读取属性时调用的函数，默认值是undefined 2..set：在写入属性的时候调用的函数，默认值是undefined

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: function(){}的简写
	get(){   
		console.log('有人读取age属性了')
		return number
	},
	//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
	set(value){
		console.log('有人修改了age属性，且值是',value)
		number = value
	}
})

下面来看一下修改对象的属性值,

var book = {
    _year : 2004,
    edition : 1
}

Object.defineProperty(book,"year",{
    get: function(){
        return this._year
    },
    set: function(newYear){
        if(newYear > 2004){
            this._year = newYear;
            this.edition += newYear - 2004
        }
    }
})

book.year = 2005;
console.log(book.edition); // 2 = this.edition+2005-2004
console.log(book._year); //2005

下面再列一个, 定义多个属性

var student = {};
Object.defineProperties(student,{
    name:{
        writable:false,
        value:"lisi"
    },
    age : {
        writable:true,
        value : 16,
    },
    sex:{
        get(){
            return '男';
        },
        set(v){
            p1.sex = v
        }
    }
})

p1.sex = "男";
console.log(student.name + ":" + student.age);
console.log(p1.sex); // 男
student.sex = "女";
console.log(student.sex); //男
console.log(p1.sex); // 女

下面再来一个实例, 用obj1改变obj2. 也久是数据代理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>何为数据代理</title>
	</head>
	<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>
</html>