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>
912
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
