前端 面试题总结 持续补充

简述MVVM

• MVVM（Model–View–Viewmodel）是一种软件架构模式。
  MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑（数据模型）的开发分离开
• Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁。在MVVM架构下，View 和 Model 之间没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
  ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，ViewModel里面包含DOM Listeners和Data Bindings，DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层DOM元素的变化，当发生变化，Model层的数据随之变化；Data Bindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。
• MVVM模式的优点：
  1.低耦合。View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
  2.可重用性。可以把一些视图的逻辑放在ViewModel里面，让很多View重用这段视图逻辑。
  3.独立开发。开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员可以专注于界面(View)的设计。
  4.可测试性。可以针对ViewModel来对界面(View)进行测试

谈谈对vue生命周期的理解？

每个Vue实例在创建时都会经过一系列的初始化过程
vue的生命周期钩子就是在达到某一阶段或条件时去触发的函数，目的就是为了完成一些动作或事件

• create阶段：vue实例被创建
  beforeCreate: 最初调用触发，创建前，此时data和methods中的数据都还没有初始化，data和events都不能用
  created： 创建完毕，data中有值，未挂载，data和events已经初始化好，data已经具有响应式；在这里可以发送请求
• mount阶段： vue实例被挂载到真实DOM节点
  beforeMount：在模版编译之后，渲染之前触发，可以发起服务端请求，去数据，ssr中不可用，基本用不上这个hook
  mounted: 在渲染之后触发，此时可以操作DOM，并能访问组件中的DOM以及$ref,SSR中不可用
• update阶段：当vue实例里面的data数据变化时，触发组件的重新渲染
  beforeUpdate :更新前，在数据变化后，模版改变前触发，切勿使用它监听数据变化
  updated：更新后，在数据改变后，模版改变后触发，常用于重渲染案后的打点，性能检测或触发vue组件中非vue组件的更新
• destroy阶段：vue实例被销毁
  beforeDestroy：实例被销毁前，组件卸载前触发，此时可以手动销毁一些方法，可以在此时清理事件、计时器或者取消订阅操作
  destroyed: 卸载完毕后触发，销毁后，可以做最后的打点或事件触发操作

组件生命周期

• 生命周期（父子组件） 父组件beforeCreate --> 父组件created --> 父组件beforeMount --> 子组件beforeCreate --> 子组件created --> 子组件beforeMount --> 子组件 mounted --> 父组件mounted -->父组件beforeUpdate -->子组件beforeDestroy–> 子组件destroyed --> 父组件updated
• 加载渲染过程 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
• 挂载阶段 父created->子created->子mounted->父mounted
• 父组件更新阶段 父beforeUpdate->父updated
• 子组件更新阶段 父beforeUpdate->子beforeUpdate->子updated->父updated
• 销毁阶段 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

v-if和v-show的区别？

• 两个指令从效果上是类似的，都能控制元素的显示和隐藏，本质上有区别
• 原理
  v-if 的原理：控制元素是否渲染到页面，动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了
  v-show的原理：控制元素样式是否显示（已经渲染到了页面） 相当于 display:none 控制css中的display设置为none，只会编译一次
• 使用场景：
  用v-show的情况：要频繁地让一个元素去显示和隐藏(切换开销比较小，初始开销较大)
  用v-if的情况：希望元素渲染出来后变化就比较少了（初始渲染开销较小，切换开销比较大）
• 从性能层面：
  v-if这些指令渲染出来的内容实际上是控制dom元素的增加和删除，dom元素的增加删除对性能开销比较大
  如果仅仅控制样式变化性能开销比较小，如果这些变化能满足我们的需求就用v-show

AJAX运行原理

Ajax 相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。
Ajax向服务器端发送请求与接收响应的过程：由Ajax帮助浏览器向服务器端发送请求，由Ajax帮助浏览器接收服务器端响应到客户端的数据，当Ajax接收到服务器端响应过来的数据后，再使用DOM方法将服务器端发送过来的数据内容添加到页面当中，这样就可以实现用户边浏览网站边向服务器端请求数据了，并且实现页面无刷新更新数据。
在传统网站当中，请求的发送和响应的接收，开发人员是不可控的；而使用Ajax技术向服务器端发送请求与响应的接收开发人员是可控的，我们可以在请求发送与响应接收期间为用户作加载提示，以进一步提高用户浏览网站的体验。
先开启网站服务器，这样才能以域名的方式访问静态资源文件

输入url的过程

1.浏览器根据请求的 URL 交给 DNS 域名解析，找到真实 IP ，向服务器发起请求；
2.服务器交给后台处理完成后返回数据，浏览器接收⽂件（ HTML、JS、CSS 、图象等）;
3.浏览器对加载到的资源（ HTML、JS、CSS 等）进⾏语法解析，建立相应的内部数据结构 （如 HTML 的 DOM）;
4.载⼊解析到的资源⽂件，渲染页面，完成。