VUE常见面试题50道.docx

"VUE常见面试题50道" Vue 是一款 MVVM 框架，基于双向绑定数据，当数据发生变化时候，vue 自身会进行一些运算。它的特点是简洁轻量、数据驱动、组件化、模块友好。 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性，没有替代方案。 Vue 的双向数据绑定的原理是通过 Object 对象的 defineProperty 属性，重写 data 的 set 和 get 函数来实现的。 Vue 是通过数据劫持的方式来做数据绑定，最核心的方法就是通过 Object.defineProperty() 来实现对属性的劫持。在设置或者获取的时候我们就可以在 get 或者 set 方法里加入其他的触发函数，达到监听数据变动的目的。 MVVM 是 Model-View-ViewModel 的缩写。Model 层代表数据模型，View 代表组件视图，负责将数据模型转化成 UI 展现出来。ViewModel 是一个同步 View 和 Model 的对象（双向绑定）。在 MVVM 中，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的，因此通过视图操作数据，也能通过数据操作视图。 Vue.js 的两个核心是数据驱动和组件化思想。 Vue 的双向邦定是基于 ES5 中 getter/setter 来实现的，而 angular 是由自己实现一套模版编译规则，需要进行所谓的“脏值”检查，vue 则不需要。 Vue 的底层原理是 m-v-vm 模式，即（model-view-modelView），通过 modelView 作为中间层，进行双向数据的绑定与变化。通过建立虚拟 DOM 树 document.createDocumentFragment(),方法创建虚拟 DOM 树。一旦被监测的数据改变，会通过 Object.defineProperty 定义的数据拦截，截取到数据的变化。截取到的数据变化，从而通过订阅——发布者模式，触发 Watcher（观察者），从而改变虚拟 DOM 中的具体数据。最后通过更新虚拟 DOM 的元素值，从而改变最后渲染 DOM 树的值，完成双向绑定。 单页面应用的优点是无刷新，用户体验好，共享资源只需要请求一次即可，采用组件化的思想，代码结构更加规范化，便于修改和调整。缺点是对搜索引擎不友好、低版本不支持，第一次加载首页耗时相对较长，不能使用浏览器导航按钮，需要自行实现前进后退。 React 与 Vue 对比，相同点是都支持服务器端渲染、数据驱动视图，状态管理。都有虚拟 DOM、组件化开发、通过 props 参数进行父子组件数据的传递。不同点是 React 严格上只针对 MVC 的 C 层,Vue 则是 MVVM 模式。虚拟 DOM 方面，vue 会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树，而 React 每当应用的状态被改变时,全部组件都会重新渲染。视图渲染方面，React 采用 JSX 渲染到 DOM，vue 使用的是 template 模板。数据绑定方面，vue 实现了数据的双向绑定，react 数据流动是单向的。state 对象方面，react 应用中不可变的,需要使用 setState 方法更新状态，vue 中,state 对象不是必须的,数据由 data 属性在 vue 对象中管理。 前端组件化的优势包括提高开发效率、方便重复使用、便于协同开发、更容易管理维护。 Vue 的生命周期包括创建前/后 beforeCreate/created、Mounted 等。在使用 keep-alive 属性时，会增加两个生命周期 beforeDestroy 和 destroyed。