vue基础响应式数据

Posted 2022-12-06 moon-yyl

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

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

　　通过Object.defineproperty数据劫持

 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 */

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