vue基础响应式数据

 1 //vue 响应式数据是怎么做到的：数据劫持 Object.defineproperty
 2 let obj = {
 3     name:"小明",
 4     age:32,
 5     info:{
 6         b:10
 7     }
 8 }
 9 function observe(obj){
10     if(typeof obj === ‘object‘){
11         //重新定义
12         for(let key in obj){
13             defineReactive(obj,key,obj[key]);
14         }
15     }
16 }
17 function defineReactive(obj,key,value){
18     observe(value);
19     Object.defineProperty(obj,key,{
20         get(){
21             console.log("get，",value);
22             return value;
23         },
24         set(newVal){
25             observe(newVal); //假如设置的值也是对象，也需要监视
26             console.log(‘数据修改了‘);
27             value = newVal;
28         }
29     })
30 }
31 observe(obj);
32 obj.age; //调用get()
33 obj.info = {b:20}; //调用set()
34 /*
35 输出：
36 get， 32
37 数据修改了
38 */