What is the difference between vue1.0 and 2.0

Vue.js is a progressive framework for building data-driven web interfaces. The goal of Vue.js is to enable responsive data binding and composed view components with the simplest possible API. Not only is it easy to get started, it is also easy to integrate with third-party libraries or existing projects. So what is the difference between its 1.0 and 2.0? Let's take a look.

1. Life cycle

1. Life cycle of 1.0:

Cycle	Explanation
init	Component just Created, but the Data, method and other attributes have not been calculated yet
created	The component creation has been completed, but the DOM has not been generated yet
beforeCompile	Before template compilation
compiled	After template compilation
ready	Component preparation (usually used more)
attached	Called when vm.$el is inserted into the DOM
detached	Called when vm.$el is deleted from the DOM
beforeDestory	Before the component is destroyed
destoryed	After the component is destroyed

2, 2.0 life cycle

##beforeCreateComponent just Created, but the Data, method and other attributes have not been calculated yetcreatedThe component creation has been completed, but the DOM has not been generated yetbeforeMountBefore template compilationmountedAfter template compilation, component preparationbeforeUpdateBefore the component is updated (when data etc. changes) updatedAfter component is updated (when data etc. changes) activatedfor keep-alive, called when the component is activateddeactivatedfor keep -alive, called when the component is removed beforeDestoryBefore the component is destroyeddestoryed After the component is destroyed

Cycle	Explanation

2.0 life cycle changes feel more semantic (there are rules to find, easier to remember), and beforeUpdate, updated, activated are added , deactivated, deleted attached, detached.

2: Filter

2.0 deletes all the filters that come with 1.0, that is to say, in 2.0, you need to use filters , we need to write it ourselves. The following is an example of a custom filter,

Vue.filter('toDou',function(n,a,b){
    return n<10?n+a+b:&#39;&#39;+n;
});

Three: Loop

Regarding integer loops, the integer loop of 1.0 starts from 0 Yes, the integer loop of 2.0 starts from 1. Compare below:

//HTML代码<ul id=&#39;box&#39;>
    <li v-for=&#39;val in 5&#39; v-text=&#39;val&#39;></li></ul>

4. Fragment code

When writing template, 2.0 must use a root element (such as div) wrap the code fragment, otherwise an error will be reported.

之前:   在1.0使用时完全没问题
    <template>
        <h3>我是组件</h3><strong>我是加粗标签</strong>
    </template>
现在:  必须有根元素，包裹住所有的代码
    <template id="aaa">
            <div>
                <h3>我是组件</h3>
                <strong>我是加粗标签</strong>
            </div>
    </template>

The above only lists some of the changes. Generally speaking, the changes in vue upgrading to 2.0 are not that big. There are some new changes that will be added after climbing through the pits

( • ̀ω •́ )✧

The above is the detailed content of What is the difference between vue1.0 and 2.0. For more information, please follow other related articles on the PHP Chinese website!