vue常见面试题

2023-04-26 18:51:02JavaScript022

vue常见面试题,第1张

1.什么是vue的生命周期？

Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载DOM->渲染、更新->渲染、卸载等一系列过程，我们称这是Vue的生命周期。

2.vue生命周期的作用是什么？

它的生命周期中有多个事件钩子，让我们在控制整个vue实例的过程时更容易形成好的逻辑。

3.Vue生命周期总共有几个阶段？

它可以总共分为8个阶段：创建前/后,载入前/后，更新前/后，销毁前/销毁后

4.第一次页面加载会触发那几个钩子？

第一次页面加载时会触发beforeCreate,created,beforeMount,mounted

5.DOM渲染在哪个周期中就已经完成？

DOM渲染在mounted中就已经完成了

6.生命周期钩子的一些使用方法：

1.beforecreate:可以在加个loading事件，在加载实例是触发

2.created:初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用

3.mounted:挂载元素，获取到dom节点

4.updated:如果对数据统一处理，在这里写上相应函数

5.beforeDestroy:可以一个确认停止事件的确认框

6.nextTick:更新数据后立即操作dom

7.v-show与v-if的区别

v-show是css切换，v-if是完整的销毁和重新创建

使用频繁切换时用v-show,运行时较少改变时用v-if

V-if=’false’v-if是条件渲染，当false的时候不会渲染

使用v-if的时候，如果值为false，那么页面将不会有这个html标签生成

v-show则是不管值是为true还是false，html元素都会存在，只是css中的display显示或隐藏

v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

8.开发中常用的指令有哪些?

v-model:一般用在表达输入，很轻松的实现表单控件和数据的双向绑定

v-html：更新元素的innerHTML

v-show与v-if：条件渲染，注意二者区别

v-on:click:可以简写为@click,@绑定一个事件。如果事件触发了，就可以指定事件的处理函数

v-for：基于源数据多次渲染元素或模板

v-bind:当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM语法

v-bind:title=”msg”简写：title="msg"

9.绑定class的数组用法

1.对象方法v-bind:class="{'orange':isRipe, 'green':isNotRipe}”

2.数组方法v-bind:class="[class1,class2]"

3.行内v-bind:style="{color:color,fontSize:fontSize+'px'}”

10.路由跳转方式

1.router-link标签会渲染为标签，咋填template中的跳转都是这种；

2.另一种是编辑是导航，也就是通过js跳转比如router.push('/home')

12. computed和watch有什么区别

computed

computed是计算属性，也就是计算值，它更多用于计算值的场景

computed具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时重新调用对应的getter来计算

computed适用于计算比较消耗性能的计算场景

watch

watch更多的是[观察]的作用，类似于某些数据的监听回调，用于观察props $emit或者本组件的值，当数据变化时来执行回调进行后续操作

无缓存性，页面重新渲染时值不变化也会执行

小结

当我们要进行数值计算，而且依赖于其他数据，那么把这个数据设计为computed

如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。

13. vue组件的scoped属性的作用

在style标签上添加scoped属性，以表示它的样式作用于当下的模块，很好的实现了样式私有化的目的；

但是也得慎用：样式不易（可）修改，而很多时候，我们是需要对公共组件的样式做微调的；

解决办法：

①：使用混合型的css样式：（混合使用全局跟本地的样式） /* 全局样式 */ /* 本地样式 */

②：深度作用选择器（>>>）如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>>操作符： .a >>>.b { /* ... */ }

14. vue是渐进式的框架的理解：( 主张最少,没有多做职责之外的事 )

Vue的核心的功能，是一个视图模板引擎，但这不是说Vue就不能成为一个框架。如下图所示，这里包含了Vue的所有部件，在声明式渲染（视图模板引擎）的基础上，我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。更重要的是，这些功能相互独立，你可以在核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。可以看到，所说的“渐进式”，其实就是Vue的使用方式，同时也体现了Vue的设计的理念

在我看来，渐进式代表的含义是：主张最少。视图模板引擎

每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。

比如说，Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西：

必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）

所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。

Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。

渐进式的含义，我的理解是：没有多做职责之外的事。

15.vue.js的两个核心是什么(数据驱动、组件系统。)

数据驱动:Object.defineProperty和存储器属性: getter和setter（所以只兼容IE9及以上版本），可称为基于依赖收集的观测机制,核心是VM，即ViewModel，保证数据和视图的一致性。

16.vue常用修饰符

修饰符分为：一般修饰符，事件修身符，按键、系统

①一般修饰符：

.lazy：v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步

<inputv-model.lazy="msg">

.number

<inputv-model.number="age"type="number">

.trim

1.如果要自动过滤用户输入的首尾空白字符<inputv-model.trim='trim'>

② 事件修饰符

<av-on:click.stop="doThis"></a>

<formv-on:submit.prevent="onSubmit"></form>

<av-on:click.stop.prevent="doThat"></a>

<formv-on:submit.prevent></form>

<divv-on:click.capture="doThis">...</div>

<divv-on:click.self="doThat">...</div>

<av-on:click.once="doThis"></a>

③按键修饰符

全部的按键别名:

.enter.tab.delete(捕获“删除”和“退格”键).esc.space.up.down.left.right.ctrl.alt.shift.meta

<inputv-on:keyup.enter="submit">或者<input@keyup.enter="submit">

④系统修饰键（可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。）

.ctrl.alt.shift.meta

<input@keyup.alt.67="clear">或者<div@click.ctrl="doSomething">Dosomething</div>

20.Vue 组件中 data 为什么必须是函数

vue组件中data值不能为对象，因为对象是引用类型，组件可能会被多个实例同时引用。

如果data值为对象，将导致多个实例共享一个对象，其中一个组件改变data属性值，其它实例也会受到影响。

前端Vue.js框架是什么？有哪些特点？Vue.js是一个前端框架，用于构建用户界面的渐进式框架。在Vue中一个核心的概念是让用户不再操作DOM元素解放了用户的双手，让程序员可以更多的时间去关注业务逻辑，Vue框架能够提高开发的效率。

科普时刻 ：

黑马程序员vue前端基础教程-4个小时带你快速入门vue

前端开发利器vue，微信小程序快速开发实战

web前端基础必备教程-2小时玩转Vue单元测试

黑马程序员Vue2.0+Vue3.0入门到精通，大厂前端岗位必备技能

1、Vue.js是什么？

Vue是一个js库，且无依赖别的js库跟jquery差不多。Vue核心库只关注视图层，非常容易与其它库或已有项目整合。Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。

Vue.是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2、Vue的MVVM设计模式是什么？

如果了解前端一定知道MVVM和MVC这两种设计模式，且很有可能对mvp也有一些了解。MVC即model，view，control，jQuery就是采用的这种设计模式。MVVM即model，view，viewmodel，是数据驱动模式，即所有的一切通过操作数据来进行而尽量避免操作DOM树。

不关注DOM结构，考虑数据该如何储存，用户的操作在view通过viewmodel进行数据处理，分情况是否通过ajax与model层进行交互，再返回到view层，在这个过程中view和viewmodel的数据双向绑定使得我们完全的摆脱了对DOM的繁琐操作，而是专心于对用户的操作进行处理，避免MVC中control层过厚的问题。

在vue调试方面可以选择安装chrome插件vue Devtools。打开vue项目，在console控制台选择vue面板。在Devtools对象中，可以选择组件，查看对应组件内的数据信息。也可以选择Vuex选项，查看该项目内Vuex的状况变量信息。

3、Vue.js有哪些优点？

声明式，响应式的数据绑定；组件化的开发；Virtual DOM；响应式的数据绑定

（1）jQuery首先获取到DOM对象，然后对DOM对象进行进行值的修改等操作；

（2）Vue首先把值和js对象进行绑定，然后修改js对象值，Vue框架会自动把DOM的值就行更新；

（3）简单理解为Vue帮我们做了DOM操作，以后用Vue就需要修改对象的值和做好元素和对象的绑定，Vue框架会自动做好DOM相关操作；

（4）DOM元素跟随JS对象值的变化而变化叫做单向数据绑定，若JS对象的值也跟随着DOM元素。

4、需要学习哪些Vue.js框架相关知识点？

Vue.js 安装、Vue.js 目录结构、Vue.js 起步、Vue.js 模板语法、Vue.js 条件语句、Vue.js 循环语句、Vue.js 计算属性、Vue.js 监听属性、Vue.js 样式绑定、Vue.js 事件处理器、Vue.js 表单、Vue.js 组件、Vue.js 组件自定义事件、Vue.js 自定义指令、Vue.js 路由、Vue.js 过渡&动画、Vue.js 混入、Vue.js Ajax(axios)、Vue.js Ajax(vue-resource)、Vue.js 响应接口、Vue.js 实例等。

Vue.js 是一个JavaScriptMVVM库，一套构建用户界面的渐进式框架。以数据驱动和组件化的思惟构建的，采取自底向上增量开辟的设计。比拟于Angular.js，Vue.js供给了加倍简洁、更易于懂得的API，使得我们快速地上手并应用Vue.js。

认识Vue.js+Vue.js的优缺点+和与其他前端框架的区别

首先，我们先了解什么是MVX框架模式？MVX框架模式：MVC+MVP+MVVM1.MVC：Model(模型)+View(检视)+controller(控制器)，主要是基于分层的目的，让彼此的职责分开。View通过Controller来和Model联络，Controller是View和Model的协调者，View和Model不直接联络，基本联络都是单向的。使用者User通过控制器Controller来操作模板Model从而达到检视View的变化。2.MVP：是从MVC模式演变而来的，都是通过Controller/Presenter负责逻辑的处理+Model提供资料+View负责显示。在MVP中，Presenter完全把View和Model进行了分离，主要的程式逻辑在Presenter里实现。并且，Presenter和View是没有直接关联的，是通过定义好的介面进行互动，从而使得在变更View的时候可以保持Presenter不变。MVP模式的框架：Riot,js。3.MVVM：MVVM是把MVC里的Controller和MVP里的Presenter改成了ViewModel。Model+View+ViewModel。View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上显示。这种自动同步是因为ViewModel中的属性实现了Observer，当属性变更时都能触发对应的操作。MVVM模式的框架有：AngularJS+Vue.js和Knockout+Ember.js后两种知名度较低以及是早起的框架模式。Vue.js是什么？看到了上面的框架模式介绍，我们可以知道它是属于MVVM模式的框架。那它有哪些特性呢？其实Vue.js不是一个框架，因为它只聚焦检视层，是一个构建资料驱动的Web介面的库。Vue.js通过简单的API（应用程式程式设计介面）提供高效的资料系结和灵活的元件系统。Vue.js的特性如下：1.轻量级的框架2.双向资料系结3.指令4.外挂化Vue.js与其他框架的区别？1.与AngularJS的区别相同点：都支援指令：内建指令和自定义指令。都支援过滤器：内建过滤器和自定义过滤器。都支援双向资料系结。都不支援低端浏览器。不同点：1.AngularJS的学习成本高，比如增加了DependencyInjection特性，而Vue.js本身提供的API都比较简单、直观。2.在效能上，AngularJS依赖对资料做脏检查，所以Watcher越多越慢。Vue.js使用基于依赖追踪的观察并且使用非同步伫列更新。所有的资料都是独立触发的。对于庞大的应用来说，这个优化差异还是比较明显的。2.与React的区别相同点：React采用特殊的JSX语法，Vue.js在元件开发中也推崇编写.vue特殊档案格式，对档案内容都有一些约定，两者都需要编译后使用。中心思想相同：一切都是元件，元件例项之间可以巢状。都提供合理的钩子函式，可以让开发者定制化地去处理需求。都不内建列数AJAX，Route等功能到核心包，而是以外挂的方式载入。在元件开发中都支援mixins的特性。不同点：React依赖VirtualDOM,而Vue.js使用的是DOM模板。React采用的VirtualDOM会对渲染出来的结果做脏检查。Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作DOM。如何使用Vue.js?1.安装（1）script如果专案直接通过script载入CDN档案，程式码示例如下：(2)npm如果专案给予npm管理依赖，则可以使用npm来安装Vue,执行如下命令：$npmivue--save-dev(3)bower如果专案基于bower管理依赖，则可以使用bower来安装Vue，执行如下命令：$bowerivue--save-dev

Vue.js与其他框架的区别：

1.与AngularJS的区别

相同点：

都支援指令：内建指令和自定义指令。

都支援过滤器：内建过滤器和自定义过滤器。

都支援双向资料系结。

都不支援低端浏览器。

不同点：

1.AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观。

2.在效能上，AngularJS依赖对资料做脏检查，所以Watcher越多越慢。

Vue.js使用基于依赖追踪的观察并且使用非同步伫列更新。所有的资料都是独立触发的。

对于庞大的应用来说，这个优化差异还是比较明显的。

2.与React的区别

相同点：

React采用特殊的JSX语法，Vue.js在元件开发中也推崇编写.vue特殊档案格式，对档案内容都有一些约定，两者都需要编译后使用。

中心思想相同：一切都是元件，元件例项之间可以巢状。

都提供合理的钩子函式，可以让开发者定制化地去处理需求。

都不内建列数AJAX，Route等功能到核心包，而是以外挂的方式载入。

在元件开发中都支援mixins的特性。

不同点：

React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查。

Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作DOM。

我知道vue2.0和angularJS的区别，这两个框架非常的像，但是在vue2.0后可以将js+css写成一个元件，你想在什么页面用引入这个元件就可以用了。这很变态。

比如你在一个专案中自己写了个带搜寻框的input ，你把他写成了一个元件，xxx.vue

直接把xxx.vue移到另一个专案，只要在另一个专案中需要带搜寻框的input ，直接引用就可以了。

现在大多数框架都是以一个元件的形式搭建一个专案

vue是什么 vue特点 vue和其他前端框架区别

vue是什么

Vue.js (读音 /vju?/，类似于 view) 是一套基于javascript的用于构建使用者介面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注检视层，它不仅易于上手，还便于与第三方库或既有专案整合。另一方面，当与单档案元件和 Vue 生态系统支援的库结合使用时，Vue 也完全能够为复杂的单页应用程式提供驱动。

vue特点

简洁、轻量、元件化、快速、资料驱动、模组友好

vue和其他前端框架区别

1.与AngularJS的区别

相同点：

都支援指令：内建指令和自定义指令。

都支援过滤器：内建过滤器和自定义过滤器。

都支援双向资料系结。

都不支援低端浏览器。

不同点：

1>AngularJS的学习成本高，比如增加了Dependency Injection(依赖注入)特性，而Vue.js本身提供的API都比较简单、直观。

2>在效能上，AngularJS依赖对资料做脏检查，所以Watcher越多越慢。

Vue.js使用基于依赖追踪的观察并且使用非同步伫列更新。所有的资料都是独立触发的。

对于庞大的应用来说，这个优化差异还是比较明显的。

手机渲染速度：angular1 300ms * vue 200ms * react 100ms

2.与React的区别

相同点：

React采用特殊的JSX语法，Vue.js在元件开发中也推崇编写.vue特殊档案格式，对档案内容都有一些约定，两者都需要编译后使用。

中心思想相同：一切都是元件，元件例项之间可以巢状。

都提供合理的钩子函式，可以让开发者定制化地去处理需求。

都不内建列数AJAX，Route等功能到核心包，而是以外挂的方式载入。

在元件开发中都支援mixins的特性。

不同点：

React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查。

Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作DOM。

vue的应用场景

简单地说，就是需要对 DOM 进行很多自定义操作的专案小专案理论上 Vue 配合类似Flux的架构也可以胜任超大规模多人协作的复杂专案。

如何用vue.js和ionic搭建前端框架

前端可以用flightplan.js 部署。 var config = require("./webpack.config.js")var webpack = require("webpack") var webpackDevServer=require("webpack-dev-server") confi

vue.js高仿饿了么外卖app 2016最火前端框架

React

React 和 Vue 有许多相似之处，它们都有：

使用 Virtual DOM

提供了响应式（Reactive）和元件化（Composable）的检视元件。

保持注意力集中在核心库，伴随于此，有配套的路由和负责处理全域性状态管理的库。

相似的作用域，我们会用更多的时间来讲这一块的比较。不仅我们要保持技术的准确性，同时兼顾平衡。我们指出React比Vue更好的地方，例如，他们的生态系统和丰富的自定义渲染器。

React社群在这里非常积极地帮助我们实现这一平衡，特别感谢来自 React 团队的 Dan Abramov 。他非常慷慨的花费时间来贡献专业知识，来帮我们完善这个档案，直到我们都满意。

这么说，就是希望你能对这两个库的比较的公平性感到放心。

效能简介

到目前为止，在现实的测试中，Vue 是优于 React 的（通常至少快20%-50%，尽管在某些情况下还要更快）。我们可以提供一个到这个参照专案的连结，但是坦率的说，所有的参照在某些方面是有缺陷的，很少有像你所写的一个真实应用。那么，让我们详细了解下吧。

渲染效能

在渲染使用者介面的时候，DOM的操作是最昂贵，不幸的是没有库可以让这些原始操作变得更快。

我们能做的最好的就是：

尽量减少DOM操作。Vue 和 React 都使用虚拟DOM来实现，并且两者工作一样好。

尽量减少除DOM操作以外的其他操作。这是 Vue 和 React的一个不同的地方。

假如说，在React中，渲染一个元素的额外开销是1，而平均渲染一个元件的开销是2。在Vue中，一个元素的开销更像0/vue/dist/vue.js"></script>然后就可编写Vue程式码并应用到生产中，而不用担心效能问题。

由于起步阶段不需学JSX，ES2015 或构建系统，所以建立应用花的时间会更少。

本地渲染

ReactNative能使你用相同的元件模型编写有本地渲染能力的APP（IOS或Android）。能同时跨多平台开发，对开发者是非常棒的。相应地，Vue和Weex会进行官方合作，Weex是阿里的跨平台使用者介面开发框架，Weex 的 JavaScript 框架执行时用的就是Vue。这以为著不仅在浏览器，在 IOS 和 Android 上面也可以用 Vue 来进行开发。

在现在，Weex 还在积极发展，成熟度也不能和 ReactNative 相抗衡。但是，Weex的发展是由世界上最大的电子商务企业的需求在驱动，Vue 团队也会和 Weex 团队积极合作确保为开发者带来良好的开发体验。

MobX

Mobx 在 React 社群很流行，实际上在Vue也采用了几乎相同的反应系统。在有限程度上，React + Mobx 也可以被认为是更繁琐的 Vue，所以如果你习惯组合使用它们，那么选择 Vue 会更合理。

Angular 1

Due的一些语法和Angular的很相似（例如 v-if vs ng-if）。因为Angular是Vue早期开发的灵感来源。然而，Augular中存在许多问题，在Vue中已经得到解决。

复杂性

在 API 与设计两方面上 Vue.js 都比 Angular 1 简单得多，因此你可以快速地掌握它的全部特性并投入开发。

灵活性和模组化

Vue.js 是一个更加灵活开放的解决方案。它允许你以希望的方式组织应用程式，而不是在任何时候都必须遵循 Angular 1 制定的规则，这使让Vue能适用于各种专案。我们知道把决定权交给你，是非常必要的，就是是为什么提供Webpack template，让你用几分钟，去选择是否用高阶特性，比如热模组载入、linting 、

Css extraction 等等。

资料系结

Angular 1 使用双向系结，Vue在不同元件间强制适用单向资料流。这使应用中的资料流清晰易懂。

指令与元件

在 Vue 中指令和元件分得更清晰。指令只封装 DOM 操作，而元件代表一个自给自足的独立单元 —— 有自己的检视和资料逻辑。在 Angular 中两者有不少相混的地方。

效能

Vue.js 有更好的效能，并且非常非常容易优化，因为它不使用脏检查。

在Angular 1中，当 watcher 越来越多时会变得越来越慢，因为作用域内的每一次变化，所有 watcher 都要重新计算。并且，如果一些 watcher 触发另一个更新，脏检查回圈（digest cycle）可能要执行多次。 Angular 使用者常常要使用深奥的技术，以解决脏检查回圈的问题。有时没有简单的办法来优化有大量 watcher 的作用域。

Vue.js 则根本没有这个问题，因为它使用基于依赖追踪的观察系统并且非同步列队更新，所有的资料变化都是独立地触发，除非它们之间有明确的依赖关系。

有意思的是，Angular 2 和 Vue 用相似的设计解决了一些 Angular 1 中存在的问题。

Angular 2

Augluar 2完全是一个全新的框架。例如,它具有优秀的元件系统，并且许多实现已经完全重写，API也完全改变了。

TypeScript

Angular 1面向的较小的应用程式，Angular 2已转移焦点，面向的是大型企业应用。TypeScript被引用，这对那些喜欢用Java或者C#等型别安全的语言的人是非常有用的。

Vue也适合企业应用，也可以使用TypeScript来支援官方型别和使用者贡献的型别，尽管这是可选的。

尺寸和效能

在效能方面，这两个框架都是非常快。但是如果你检视第三方参照，就可以得出 Vue 2 比 Angular2 要快的。

在尺寸方面，虽然 Angular 2 使用 tree-shaking 技术和编译技术能使程式码尺寸减小。

即便包含编译器和全部功能 Vue2(23kb)比起 Angular 2(50kb)还是小的多。但是要注意，用 Angular 的 App 的尺寸缩减是用 tree-shaking 移除了那些框架中没有用到的功能，当随着引入功能的增多，尺寸会越来越大。

灵活性

Vue 官方提供了构建工具，但没限制你如何构建。有人喜欢用统一的方式构建，也有很多开发者喜欢这种灵活自由的方式。

学习曲线

开始使用Vue，你使用的是熟悉的HTML、符合ES5规则的JavaScript（也就是纯JavaScript）。有了这些基本的技能，你可以快速地掌握它(指南)并投入开发。

Angular 2 的学习曲线是非常陡峭的。即使不包括TypeScript，它们开始指南中所用的就有ES2015标准的JavaScript，18个NPM依赖包，4个档案和超过3千多字介绍，这一切都是为了完成个Hello World。而Vue's Hello World就非常简单。

Ember

Ember 是一个全能框架。它提供大量的约定，一旦你熟悉了它们，开发会很高效。不过，这也意味着学习曲线较高，而且不灵活。在框架和库（加上一系列松散耦合的工具）之间权衡选择。后者更自由，但是也要求你做更多的架构决定。

也就是说，最好比较 Vue.js 核心和 Ember 的模板与资料模型层：

Vue 在普通 JavaScript 物件上建立响应，提供自动化的计算属性。在 Ember 中需要将所有东西放在 Ember 物件内，并且手工为计算属性宣告依赖。

Vue 的模板语法可以用全功能的 JavaScript 表示式，而 Handlebars 的语法和帮助函式语法相比之下非常受限。

在效能上，Vue 甩开 Ember 几条街，即使是 Ember2.0 的最新Glimmer引擎。Vue自动批量更新，Ember 当效能关键处需要手动管理。

Knockout

Knockout 是MVVM领域内的先驱，并且追踪依赖。它的响应系统和Vue相似。它对浏览器支援以及所有的表现也是让人印象深刻的。它能最低支援到IE6，而Vue最低只能支援到IE9。

随着时间的推移，Knockout的发展已有所放缓，并且略显有点老旧了。比如，它的元件系统缺少完备的生命周期事件方法，尽管这些在现在是非常常见。以及相比Vue呼叫子元件的介面显得有点笨重。

如果你有兴趣研究，会发现它们在介面设计的构思理念上是不同的。这些通过各自建立的 simple Todo List 可以体现出来。或许有点主观，但是很多人认为Vue的API介面更简单结构更优雅。

Polymer

Polymer 是另一个由谷歌赞助的专案，事实上也是Vue的一个灵感来源。Vue的元件可以粗略的类比于Polymer的自定义元素，并且两者具有相似的开发风格。最大的不同之处在于，Polymer是构建于最新版的Web Components标准之上的，并且需要非凡的polyfills来工作（效能下降），浏览器本身不支援这些功能。相比而言，Vue不需要依赖polyfills来工作，最低到IE9。

在 Polymer 1.0版本中，为了弥补效能，团队非常有限的使用资料系结系统。例如，在Ploymer中支援的唯一表达式只有布林值否定和单一的方法的呼叫，它的puted方法的实现也不是很灵活。

Polymer 自定义的元素是用HTML档案来建立的，这回限制你的普通的JavaScript/CSS（和被现代浏览器普遍支援的语言特性）。相比之下，Vue的单档案允许你非常容易的使用ES2015和你想用的Css的预编译处理器。

当部署到生产环境的时候，Polymer建议使用HTML Imports载入所有资源。而这要求伺服器和客户端都支援Http 2.0协议，且浏览器实现了标准。这是否可行就取决于你的目标使用者和部署环境了。如果状况不佳，你必须用Vulcanizer工具来来打包Polymer元素。在这方面，Vue 可以结合非同步元件的特性和Webpack的程式码分割特性来实现懒载入（lazy-loaded）。这同时确保了对旧浏览器的相容且又能更快载入。

对Vue和Web Component标准之间进行深层次的整合，也是完全可行的，比如Custom Elements、Shadow DOM的样式封装。然而现在在我们做出严肃的承诺之前，我们仍在等待标准成熟，进而广泛应用于主流的浏览器中。

Riot

Riot 2.0 提供了一个类似于基于元件的开发模型（在Riot中称之为”Tag”），提供小巧精美的API。Riot 和 Vue 可能共享一些设计理念。即使相比Roit重一点，Vue还是有很多显著优势的：

根据真实条件来渲染，Roit根据是否有分支简单显示或隐藏所有内容。

功能更加强大的路由机制，Roit的路由功能的API是极少的。

更多成熟工具的支援。Vue 提供官方支援Webpack、Browserify和SystemJS，而 Roit 是依靠社群来建立整合系统。

过渡效果系统。Riot现在没有提供。

更好的效能。Roit 尽管广告称用虚拟DOM，实际上用的还是脏检查机制，因此和Angular 1患有相同的效能问题。

以上所述是我给大家介绍的Vue.js 2.0 和 React、Augular等其他前端框架大比拼，希望对大家有所帮助，如果大家有任何疑问请给我留言，我会及时回复大家的。在此也非常感谢大家对指令码之家网站的支援！

react.js vue.js 这些前端框架都必须在node.js上才能跑吗

这些js写的吧，你tomcat怎么解析js，而且tomcat也是呼叫第三方的直译器来解析程式码，你看node.js能不能整合到tomcat，有没有类似的外挂。

并不是，你本地随便建个档案就能跑。