Vue知识汇总

1. MVVM和MVC有什么区别

2. nextTick是如何实现的

3. 父子组件挂载时，生命周期的顺序是怎么样的

4. 双向绑定是如何实现的

5. 关于数组和对象数据观察时，有什么特殊处理吗

6. defineProperty和proxy有什么区别

7. vue中的数据频繁变化，为什么只有一次更新

8. 什么是状态管理，为什么需要状态管理

9. 介绍一下vuex

10. 组件通信，父子，爷孙，兄弟

11. virtual DOM是什么，为什么需要，解决了什么问题

12. computed和watch分别是怎么实现的？

1. vue双向绑定原理

• Object.defineProperty() （递归消耗性能，不能监控数组)
• proxy 兼容性特别差

function observer(obj){
  if(typeof obj !== 'object' || obj == null) return;
  for(let key in obj){
    defineReative(obj,key,obj[key])
  }
}
let updateView = ()=>{
  console.log('更新')
}
<!--vm.$set-->
function defineReative(obj,key,val){
  observer(value);//递归增加getter和setter
  Object.defineProperty(obj,key,{
    get(){
      return val;
    },
    set(newVal){
      updateView(); //更新
      val = newVal;
    }
  })
}


let obj = {a:{a:10}}
observer(obj)
obj.a = "222"  //更新
console.log(obj.a)  // 222

// let obj = [1,2,3]
let obj = {
  a:{a:2},
  b:2
}

let handler = {
  get(target,key){
    // return target[key]
    if(typeof target[key] === 'object'){
      return new Proxy(target[key],handler)
    }
    return Reflect.get(target,key)
  },
  set(target,key,value){ //反射出去
    // target[key] = value;
    console.log('update')
    return Reflect.set(target,key,value)
  }
}
let proxy = new Proxy(obj,handler)

// 数组的双向绑定
// proxy.push(10)
// console.log(obj)

// 对象双向绑定
proxy.a.a = 200; //先调用proxy的get方法拿到a的值
console.log(obj.a.a)

1. 常见的状态码有哪些

2. 304和302分别表示什么，有什么区别

3. 介绍下http缓存策略

4. connection和keep-alive表示什么

5. 介绍下DNS

6. TCP的3、4次握手

7. https的工作原理，和http的区别

8.从输入url到页面展示，发生了什么