Vue中响应式的原理:
把一个普通的JavaScript对象传给Vue实例的data选项Vue将遍历此对象所有的属性,并使用Object.defineProperty把这些属性全部转为getter/setter,Vue内部会对数据进行劫持,操作,进而追踪依赖,在属性被访问和修改时通知变化
Object.defineProperty:
作用:直接在一个对象上定义新属性,或者修改一个对象的现有属性
语法:Object.defineProperty(obj,prop,descriptor)
参数:
- obj要在其定义的属性的对象
- prop要定义或修改的属性的名称
- descriptor将被定义或修改的属性描述符(是个对象)
数据描述:
- configurable 是否可以删除目标属性,默认为false(删除对象的属性:delete data.title)
- enumerable:此属性是否可以被枚举,默认为false
- value:该属性对应的值,默认为undefined
- writable:属性的值是否可以被重写。默认为false
Object.defineProperty(data,"miaov",{
value:'ketang',//描述value值
writable:false,//不允许重新改写,如果设置为true,是可以被改写的
enumerable:false,//是否可被枚举
configurable,true//是否可删除,如果设置为false,是不可以被删除的
})
访问器描述:
- getter是一种获得属性值的方法
- setter是一种设置属性值的方法
- 可以写configurable、enumerable,不能写value、writable
使用数据的时候先对数据进行劫持(代理):
使用Object.defineProperty劫持数据,把属性转成访问器的方式
- getter:获取属性触发的
- setter:设置属性触发的
看下面的小例子,使用的访问器的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<div id="wrap">
<button>改变数据</button>
<div></div>
</div>
<script src="price.js"></script>
<script>
var oWrap = document.querySelector('#wrap');
var oBtn = oWrap.querySelector('button');
var oDiv = oWrap.querySelector('div');
var data = {
title:"新闻"
}
ovserver(data);
//数据劫持,转成getter和setter
function ovserver(obj){
Object.keys(obj).forEach((item)=>{
defineReactive(obj,item,obj[item]);
})
}
function defineReactive(obj,key,value){
Object.defineProperty(obj,key,{
get(){
return value;
},
set(newValue){
value = newValue;
oDiv.innerHTML = newValue;
}
})
}
oDiv.innerHTML = data.title;
oBtn.onclick = function(){
data.title = "新的值"
}
</script>
</body>
</html>