Content deleted Content added
No edit summary |
No edit summary |
||
Line 26:
== History ==
Vue was
Vue was originally released in February 2014 by Evan You. The project was posted on [[Hacker News]], Echo JS, and the ''/r/javascript'' [[Reddit|subreddit]] the day of its initial release. Within one day the project reached the frontpage of all three sites.<ref>{{Cite web|url=http://blog.evanyou.me/2014/02/11/first-week-of-launching-an-oss-project/index.html|title=First Week of Launching Vue.js|website=Evan You|access-date=2017-03-11}}</ref>
=== Releases ===▼
==== 1.0 ====▼
==== 2.0 ====▼
== Features ==
Line 61 ⟶ 56:
=== Routing ===
Vue itself doesn’t come with [[routing]]. But there’s the
== Comparison with Other Frameworks ==
React and Vue share many similarities. They both:
* utilize a virtual DOM
* provide reactive and composable view components
* maintain focus in the core library, with concerns such as routing and global state management handled by companion libraries
=== Angular ===
Some of Vue’s syntax will look very similar to Angular (e.g. <code>v-if</code> vs <code>ng-if</code>). This is because there were a lot of things that Angular got right and these were an inspiration for Vue very early in its development. There are also many pains that come with Angular however, where Vue has attempted to offer a significant improvement.
Ember is a full-featured framework that is designed to be highly opinionated. It provides a lot of established conventions and once you are familiar enough with them, it can make you very productive. However, it also means the learning curve is high and flexibility suffers. It’s a trade-off when you try to pick between an opinionated framework and a library with a loosely coupled set of tools that work together. The latter gives you more freedom but also requires you to make more architectural decisions.
That said, it would probably make a better comparison between Vue core and Ember’s templating and object model layers:
* Vue provides unobtrusive reactivity on plain JavaScript objects and fully automatic computed properties. In Ember, you need to wrap everything in Ember Objects and manually declare dependencies for computed properties.
* Vue’s template syntax harnesses the full power of JavaScript expressions, while Handlebars’ expression and helper syntax is intentionally quite limited in comparison.
* Performance-wise, Vue outperforms Ember by a fair margin, even after the latest Glimmer engine update in Ember 2.0. Vue automatically batches updates, while in Ember you need to manually manage run loops in performance-critical situations.
=== Knockout ===
Knockout was a pioneer in the MVVM and dependency tracking spaces and its reactivity system is very similar to Vue’s. Its browser support is also very impressive considering everything it does, with support back to IE6! Vue on the other hand only supports IE9+.
Over time though, Knockout development has slowed and it’s begun to show its age a little. For example, its component system lacks a full set of lifecycle hooks and although it’s a very common use case, the interface for passing children to a component feels a little clunky compared to Vue’s.
There also seem to be philosophical differences in the API design which if you’re curious, can be demonstrated by how each handles the creation of a simple todo list. It’s definitely somewhat subjective, but many consider Vue’s API to be less complex and better structured.
=== Polymer ===
Polymer is yet another Google-sponsored project and in fact was a source of inspiration for Vue as well. Vue’s components can be loosely compared to Polymer’s custom elements and both provide a very similar development style. The biggest difference is that Polymer is built upon the latest Web Components features and requires non-trivial polyfills to work (with degraded performance) in browsers that don’t support those features natively. In contrast, Vue works without any dependencies or polyfills down to IE9.
In Polymer 1.0, the team has also made its data-binding system very limited in order to compensate for the performance. For example, the only expressions supported in Polymer templates are boolean negation and single method calls. Its computed property implementation is also not very flexible.
Polymer custom elements are authored in HTML files, which limits you to plain JavaScript/CSS (and language features supported by today’s browsers). In comparison, Vue’s single file components allows you to easily use ES2015+ and any CSS preprocessors you want.
When deploying to production, Polymer recommends loading everything on-the-fly with HTML Imports, which assumes browsers implementing the spec, and HTTP/2 support on both server and client. This may or may not be feasible depending on your target audience and deployment environment. In cases where this is not desirable, you will have to use a special tool called Vulcanizer to bundle your Polymer elements. On this front, Vue can combine its async component feature with Webpack’s code-splitting feature to easily split out parts of the application bundle to be lazy-loaded. This ensures compatibility with older browsers while retaining great app loading performance.
It is also totally feasible to offer deeper integration between Vue with Web Component specs such as Custom Elements and Shadow DOM style encapsulation - however at this moment we are still waiting for the specs to mature and be widely implemented in all mainstream browsers before making any serious commitments.
Riot 2.0 provides a similar component-based development model (which is called a “tag” in Riot), with a minimal and beautifully designed API. Riot and Vue probably share a lot in design philosophies. However, despite being a bit heavier than Riot, Vue does offer some significant advantages:
Transition effect system. Riot has none.
A far more powerful router. Riot’s routing API is extremely minimal.
Better performance. Riot traverses a DOM tree rather than using a virtual DOM, so suffers from the same performance issues as Angular 1.
More mature tooling support. Vue provides official support for Webpack and Browserify, while Riot relies on community support for build system integration.<ref>{{Cite web|url=https://vuejs.org/v2/guide/comparison.html|title=Comparison with Other Frameworks|last=|first=|date=|website=|archive-url=|archive-date=|dead-url=|access-date=2017-03-11}}</ref>
== Supporting Libraries ==
* vue-router<ref>{{Cite web|url=http://router.vuejs.org/en|title=vue-router|last=|first=|date=|website=router.vuejs.org|language=en|archive-url=|archive-date=|dead-url=|access-date=2017-03-11}}</ref>
* vuex<ref>{{Cite web|url=https://vuex.vuejs.org/en/|title=vuex|last=|first=|date=|website=vuex.vuejs.org|language=en|archive-url=|archive-date=|dead-url=|access-date=2017-03-11}}</ref>
* vue-loader<ref>{{Cite web|url=https://vue-loader.vuejs.org/en/|title=vue-loader|last=|first=|date=|website=vue-loader.vuejs.org|language=en|archive-url=|archive-date=|dead-url=|access-date=2017-03-11}}</ref>
Line 73 ⟶ 115:
== See Also ==
* [[Comparison of JavaScript frameworks]]
* [[React (JavaScript library)]]
* [[AngularJS]]
* [[JavaScript framework|JavaScript Framework]]
* [[JavaScript library|JavaScript Library]]
{{TOC|History}}
| |||