
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中定义的对象和数组可以在后面,添加元素,是响应式的。