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>