前端面试整理部分问题

1.说说Vue和Angular、ReactJS的相同点和不同点

与React的相同:

●都使用了Virtual DOM

●提供了响应式和组件化的视图组件

●将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。

与React的区别:

●组件的响应式渲染

React的组件的数据状态发生变化时,它会以该组件为根,重新渲染整个组件子树;而Vue不只去渲染需要渲染的组件。

●HTML+CSS的编写

React使用的JSX语法,将HTML、CSS和JS混写;而Vue使用的是templates模板方式,完全融合与经典的Web技术。

与Angular的相同:

Vue早起的灵感是来源于Angular,所以很多语法是类似的,如v-if和ng-if。

与Angular的区别:

●与Angular 1对比,Vue的性能更加优越,Angular性能会随着watcher的增加而变慢,而且Angular中一些watcher会出触发另一个更新,使得“脏检查循环”可能会运行多次。

●Angular事实上必须用TypeScript来开发,而且Angular对于TS的支持非常全面,而Vue暂时对于TS的支持还在改进阶段。

●Vue的体积更小,一个包含了 vuex + vue-router 的 Vue 项目 (30kb gzipped) 相比使用了这些优化的 angular-cli 生成的默认项目尺寸 (~130kb) 还是要小的多。

2.简单描述一下Vue中的MVVM模型

Vue是以数据为驱动的,Vue自身将DOM和数据进行绑定,一旦创建绑定,DOM和数据将保持同步,每当数据发生变化,DOM会跟着变化。

ViewModel是Vue的核心,它是Vue的一个实例。Vue实例是作用在某个HTML元素上的,这个HTML元素可以是body,也可以是某个id所指代的元素。 DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层DOM元素的变化,当发生变化,Model层的数据随之变化;Data Bindings监听Model层的数据,当数据发生变化,View层的DOM元素随之变化。

3.v-if和v-show指令有什么区别?

v-show对应的值无论是true还是false,对应Html元素都会存在于浏览器的文档中;而v-if如果是false的话,直接不在文档中了。

4.如何阻止Vue中的绑定事件不发生冒泡

可以使用“事件修饰符”来处理事件冒泡,如:v-on:click.stop阻止事件冒泡

或v-on:submit.prevent阻止默认事件。

⑤:父、子组件间是如何通信的?

在Vue中,每个组件实例的作用域是孤立的。这也意味着不能(也不应该)在子组件的模板内直接饮用父组件的数据。父组件通过Props向子组件传递数据,而子组件通过Events向父组件传递数据。

⑥:非父子层级的组件如何实现通信?

简单的应用场景下,可以使用一个空的Vue实例作为中央事件总线。

在复杂的情况下,可以考虑使用Vue 官方提供的状态管理模式——Vuex来进行管理。

⑦:什么是动态组件?他的作用是什么?

通过使用保留的 元素,动态地绑定到它的 is 特性,我们让多个组件可以使用同一个挂载点,并可以动态地切换。

除此之外,Vue还提供了keep-alve指令。keep-alive指令允许把切换出去的组件保留在内存中,并保留它的状态或避免重新渲染。

⑧:为什么组件中的data属性的值必须是一个函数?

因为在一个组件被多次引用的情况下,如果data的值是一个Object的话,那么由于Object是一个引用类型,所以即使是该组件被多次引用,而其实操作的是同一个对象,最终导致了引用该组件的所有位置都同步的显示了。

列出display的值,说明他们的作用。position的值,relative和absolute定位原点是?

1. block象块类型元素一样显示。

none缺省值。向行内元素类型一样显示。

inline-block象行内元素一样显示,但其内容象块类型元素一样显示。list-item象块类型元素一样显示,并添加样式列表标记。

2. position的值

*absolute

生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。*fixed(老IE不支持)

生成绝对定位的元素,相对于浏览器窗口进行定位。

* relative

生成相对定位的元素,相对于其正常位置进行定位。* static默认值。没有定位,元素出现在正常的流中*(忽略top, bottom, left, right z-index声明)。

* inherit规定从父元素继承position属性的值。

ng1和ng2之间一些差异;

Angular2不是从Angular1升级过来的,Angular2是重写的,所以他们之间的差别比较大,不是你用过1就能直接上手2的,计划可以认为是一个新的框架;

Angular2使用了javascript的超集‘Typescript’,所以angular1和angular2从设定之初就是不一样的;

Angular1.x在设计之初主要是针对pc端的,对移动端支持较少(当然也有其他一些衍生框架如ionic),而Angular2是设计包含移动端的;

Angular 1的核心概念是$scope,但是angular2中没有$scope,angular2使用zone.js来记录监测变化;

Angular 1 中的控制器在angular2中不再使用,也可以说控制器在angular2中被‘Component’组件所替代:

Angular 2中, 指令的结构、用法作了一些调整,比如1中的ng-repeat被*ngFor替代

Angular 2中, 自带原始指令在使用的时候要加上哈希(#)前缀

双向数据绑定: [(ngModel)]的写法替换了ng-model

Angular 2主要的性能优化改进是使用了分层依赖注入系统。 Angular 2实现了基于单向树的变化检测,这再次提高了性能;这些优化改进是的angular2的速度比angular1的速度提高很多;

Angular 2的大小是20kb左右,相对于angular1体积减少很多,在移动端的应用中,流量方便更占优势;

支持影子 DOM;

支持 Android 和 iOS 的原生移动渲染;

支持服务端渲染

总结:

很多人觉得从angular1转向angular2的时候学习曲线陡峭,所以在进军angular2的时候还是先做点预习功课比较好,也是因为改动较大,对angular2的设计思想、原生组件写法和工作原理有一定的了解,学习使用的过程中也更好跨阶。

尽管angular2还在应用测试阶段,但是新版本相对于angular1有了长足的优化改进,相信它会越来越多的被应用到各个应用开发中,并且angular2只会load应用所需的组件(components),这也是个很好的改进,一些统计网站上的数据显示angular的速度比angular1快五倍,不得不说这次angular2的改版升级是非常给力的;本篇列举了一些本人针对angular2新特性的理解,很多point没有写出来(有些还不很了解熟悉),开发正式项目后或者了解更多新特性后再慢慢填补更新;

zepto和jquery的区别?

jQuery 由于强大的生命力基本上是一个事实标准,所以大部分工具 lib 在 DOM 操作、动画等功能上或多或少都会是 jQuery-like 的。Zepto 的 API 就是完全兼容 jQuery 的,功能上 Zepto 是 jQuery 的子集,定位上 jQuery 桌面为主,Zepto 则从一开始就定位移动设备,所以体积方面有一定优势。也就是说如果你只用了 jQuery 很少且都是核心的功能,比如选择器等,那么可以在不改动任何业务代码的情况下把 lib 切换到 Zepto——其实就是把 $ 对象换掉了。

核心要点:

Zepto更轻量级

Zepto是jQuery的精简,针对移动端去除了大量jQuery的兼容代码

部分API的实现方式不同

详情

针对移动端程序,Zepto有一些基本的触摸事件可以用来做触摸屏交互(tap事件、swipe事件),Zepto是不支持IE浏览器的。

DOM操作的区别:添加id时jQuery不会生效而Zepto会生效

事件触发的区别:使用jquery时load事件的处理函数不会执行;使用zepto时load事件的处理函数会执行

事件委托的区别:zepto中,选择器上所有的委托事件都依次放入到一个队列中,而在jquery中则委托成独立的多个事件

width() 与 height()的区别:zepto由盒模型(box-sizing)决定,用.width()返回赋值的width,用.css('width')返回border等的结果;jquery会忽略盒模型,始终返回内容区域的宽/高(不包含padding、border).

offset()的区别:zepto返回{top,left,width,height}; jquery返回{width,height}。zepto无法获取隐藏元素宽高,jquery可以

zepto中没有为原型定义extend方法而jquery有

zepto的each方法只能遍历数组,不能遍历JSON对象。

推荐阅读更多精彩内容