vue基础响应式数据

1.vue 采用 v……vm……m，模式，v---->el,vm---->new Vue(实例)，m---->data 数据，让前端从操作大量的dom元素中解放出来。

 2.vue响应式数据是怎么做到的？

　　通过Object.defineproperty数据劫持

//vue 响应式数据是怎么做到的：数据劫持 Object.defineproperty
let obj = {
    name:"小明",
    age:32,
    info:{
        b:10
    }
}
function observe(obj){
    if(typeof obj === 'object'){
        //重新定义
        for(let key in obj){
            defineReactive(obj,key,obj[key]);
        }
    }
}
function defineReactive(obj,key,value){
    observe(value);
    Object.defineProperty(obj,key,{
        get(){
            console.log("get，",value);
            return value;
        },
        set(newVal){
            observe(newVal); //假如设置的值也是对象，也需要监视
            console.log('数据修改了');
            value = newVal;
        }
    })
}
observe(obj);
obj.age; //调用get()
obj.info = {b:20}; //调用set()
/*
输出：
get， 32
数据修改了
*/

3.vue数据劫持指的是实例中date中定义的数据，初始时实例没有定义，在后面添加的数据不具有响应式，在data中定义的对象和数组可以在后面，添加元素，是响应式的。