Vue.js 1.0.0 Released
Oct 26, 2015
Hi HN! If you are not familiar with Vue.js, you might want to read this blog post for a higher level overview.
After 300+ commits, 8 alphas, 4 betas and 2 release candidates, today I am very proud to announce the release of Vue.js 1.0.0 Evangelion! Many thanks to all those who participated in the API re-design process - it would not have been possible without all the input from the community.
The 1.0 template syntax resolves a lot of subtle consistency issues and makes Vue templates more concise and more readable in general. The most notable new feature is the shorthand syntax for
<!-- short for v-bind:href --> <a :href="someURL"></a> <!-- short for v-on:click --> <button @click="onClick"></button>
When used on a child component,
v-on listens for custom events and
v-bind can be used to bind props. The shorthands using child components very succinct:
<item-list :items="items" @ready="onItemsReady" @update="onItemsUpdate"> </item-list>
The overall goal for Vue.js 1.0 is to make it suitable for larger projects. This is why there are many API deprecations. Except for ones that are barely used, the most common reason for a deprecation is that the feature leads to patterns that damages maintainability. Specifically, we are deprecating features that make it hard to maintain and refactor a component in isolation without affecting the rest of the project.
For example, the default asset resolution in 0.12 has implicit fallbacks to parents in the component tree. This makes the assets available to a component non-deterministic and subject how it is used at runtime. In 1.0, all assets are now resolved in strict mode and there are no longer implicit fallbacks to parent. The
inherit option is also removed, because it too often leads to tightly coupled components that are hard to refactor.
1.0 replaces the old
v-repeat directive with
v-for. In addition to providing the same functionality and more intuitive scoping,
v-for provides up to 100% initial render performance boost when rendering large lists and tables!
Hot component reloading. When a
*.vuecomponent is edited, all of its active instances are hot swapped without reloading the page. This means when making small changes, e.g. tweaking the styles or the template, your app doesn’t need to fully reload; the state of the app the swapped component can be preserved, drastically improving the development experience.
Scoped CSS. By simply adding a
scopedattribute to your
*.vuecomponent style tags, the component’s template and final generated CSS are magically re-written to ensure a component’s styles are only applied to its own elements. Most importantly, the styles specified in a parent component does not leak down to child components nested within it.
Combined with vue-router, Vue.js is now more than a library - it provides a solid foundation for building complex SPAs.
As what 1.0.0 usually suggests, the core API will stay stable for the foreseeable future and the library is ready for production use. Future development will focus on:
vue-routerand make it production ready.
Streamlining the developer experience, e.g. a better devtool and a CLI for scaffolding Vue.js projects and components.
Providing more learning resources such as tutorials and examples.