9、响应式数据原理

1、声明式

　　只需要声明在哪里where，做什么what，而无需关系如何实现how

//此map方法就是，声明式的，只告诉map要实现获取2倍，然后map具体怎么实现不关心
var  arr = [1,2,3,4];
var newArr = arr.map((item,index)=>{
    return item*2;
})

2、命令式

　　需要以具体的代码表达在哪里where，做什么what，以及如何实现how

//forEach就是命令式，会具体操作数组，还有如何得到结果push
var  arr = [1,2,3,4];
var newArr = [];
arr.forEach((item,index)=>{
    newArr.push(item*2);
})

声明式的理解：

　　1）DOM状态只是数据状态的一种映射

　　2）所有的逻辑尽可能在状态的层面去进行

　　3）当状态变化了，View会被框架自动更新到合理的状态

 

3、响应式数据原理

vue响应式的核心就是Object.defindProperty

作用：直接在一个对象上定义一个新的属性，或者修改一个对象的现有属性

语法：Object.definProperty(obj,prop,descriptor)

参数：obj要在其上定义属性的对象，prop要定义的或要修改的属性的名称，descriptor将被定义或修改的属性描述符

　　　　数据描述

　　　　　　configurable：是否可以删除属性，默认false

　　　　　　enumberable：此属性是否可以被枚举，默认false

　　　　　　value：　　　该属性对应的值，默认undefined

　　　　　　writable：　　属性的值是否可以被重写，默认false

　　　　访问器描述

　　　　　　getter：是一种获得属性值的方法

　　　　　　setter：是一种设置属性值的方法

//数据劫持，转成getter和setter
function observer(obj){
    Object.keys(obj).forEach((item)=>{
          defineReactive(obj,item,obj[item])
    })
}

function defineReactive(obj,key,value){
    Object.defineProperty(obj,key,{
        enumerable:true,
        configurable:true,
        get(){
             return value;
        },
        set(newValue){
             if(value == newValue){return}
　　　　　　　　//value相当于是一个公用的存储空间，把最新的值存进去；访问也是访问这里面的最新的值
             value=newValue;
　　　　　　　　//此处还会放一些其他复杂的操作，收集依赖，通知变化等
        }
    })
}

vue响应式原理理解：

　　1、把一个普通的js对象传给Vue实例的data选项对象

　　2、Vue将遍历此对象的所有的属性，并使用Object.defineProperty把这些属性全部转换为getter/setter

　　3、Vue内部会对数据进行劫持操作，进而追踪依赖，在属性被访问和修改时通知变化