Skip to content

Commit

Permalink
1.0 post
Browse files Browse the repository at this point in the history
  • Loading branch information
yyx990803 committed Oct 23, 2015
1 parent 7baac69 commit bc87398
Show file tree
Hide file tree
Showing 5 changed files with 103 additions and 88 deletions.
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,4 @@ db.json
node_modules/
public/
.deploy*/
source/_drafts
src/_drafts
10 changes: 0 additions & 10 deletions src/_drafts/secrets_of_frontend_rendering_performance.md

This file was deleted.

39 changes: 0 additions & 39 deletions src/_drafts/unobtrusive_reactivity.md

This file was deleted.

38 changes: 0 additions & 38 deletions src/_drafts/why_vue.md

This file was deleted.

102 changes: 102 additions & 0 deletions src/_posts/1.0.0-release.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
---
title: Vue.js 1.0.0 Released
date: 2015-10-31 00:00:00
---

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](https://github.com/vuejs/vue/releases/tag/1.0.0)! 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.

<!-- more -->

### Improved Template Syntax

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 `v-on` and `v-bind`:

``` html
<!-- 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:

``` html
<item-list
:items="items"
@ready="onItemsReady"
@update="onItemsUpdate">
</item-list>
```

### API Cleanup

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.

### Faster Initial Rendering

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!

### More Powerful Tooling

There are also exciting things going on outside of Vue.js core - [vue-loader](https://github.com/vuejs/vue-loader) and [vueify](https://github.com/vuejs/vueify) have received major upgrades including:

- Hot component reloading. When a `*.vue` component 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 the swapped component can be preserved, drastically improving the development experience.

- Scoped CSS. By simply adding a `scoped` attribute to your `*.vue` component 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.

- ES2015 by default. JavaScript is evolving. You can write much cleaner and expressive code using the latest syntax. `vue-loader` and `vueify` now transpiles the JavaScript in your `*.vue` components out of the box, without the need for extra setup. Write future JavaScript today!

Combined with [vue-router](https://github.com/vuejs/vue-router), Vue.js is now more than a library - it provides a solid foundation for building complex SPAs.

### Upgrade Guide

#### General Tips

- If you are familiar with 0.12. or upgrading an active app from 0.12:

1. Read through the [notable changes](#Notable_Changes_from_0-12) below to get a general idea of the relatively big changes.

2. Read through the [revised official guide](http://vuejs.org/guide/). It is highly recommended to do this before you upgrade.

3. Upgrade to the [1.0.0 migration build](https://github.com/vuejs/vue/releases/tag/1.0.0-migration) first. The migration build is fully 0.12.16 compatible and also includes all the new features in 1.0.0. It also raises deprecation warnings for any usage of deprecated API.

4. Consult the [full changelog](https://github.com/vuejs/vue/releases/tag/1.0.0) and the [updated API Reference](http://vuejs.org/api/) as you work through the deprecation warnings. Once your app no longer raises any warnings using the migration build, it should work properly in 1.0.0.

- If you are relatively new to Vue.js:

- Just go read the [official guide](http://vuejs.org/guide/)!

### Notable Changes from 0.12

- **Data Binding Syntax Change**

This is the biggest change: directive syntax has been overhauled. No more multiple clauses; arguments are now placed inside the attribute name. The attribute value should now always be a single JavaScript expression followed by filters.

- [Cheatsheet and Details](https://github.com/vuejs/vue/issues/1325)

- **Strict Mode by Default**

In the past, asset resolution (components, directives, filters...) has implicit fallback: if an asset is not found in the current component, Vue.js will recursively look for it in its parent, its parent's parent... and so on. This allows you to, say, define a component in the root instance and use it in any child component. It is convenient, however we've found that in large projects it results to implicit coupling between a child component and its ancestors. It also hurts maintainability - when you are looking at a child component in isolation, it's hard to identify where an asset comes from because it could've been provided by **any** ancestor up the component chain.

Therefore, in 1.0 all asset resolution is "strict": an asset should either be defined on the current component, or defined as a true global asset (using one of the global `Vue.xxx` asset registration methods).

- **Bye v-repeat, Hi v-for**

`v-repeat` has been replaced by `v-for`, which is **much** faster, but comes with a few differences:

1. A alias is required now: so you should always do `v-for="item in items"`, no more `v-for="items"`.

2. The scoping is different when you use `v-for` on a component - it no longer automatically injects the data into the component, you need to explicitly pass it down using props. This makes the child component explicit about where its data comes from.

- [Details](https://github.com/vuejs/vue/issues/1200)
- [Docs](http://vuejs.org/guide/list.html)

- **&lt;slot&gt; is the new &lt;content&gt;**

The Web Components spec drafters are ditching the `<content>` API in favor of `<slot>`. Since Vue.js components are modeled after Web Components, and since the `<slot>` API does make things more explicit than relying on CSS selectors, we are moving to the `<slot>` API too.

- [Reference](https://hacks.mozilla.org/2015/06/the-state-of-web-components/)
- [Docs](http://vuejs.org/guide/components.html#Content_Distribution_with_Slots)

0 comments on commit bc87398

Please sign in to comment.