What is the difference between vuejs1.0 and 2.0-Front-end Q&A-php.cn

Difference: 1. In VUE2.0, all code must be wrapped with the root element, but not in VUE1.0. 2. Components are defined in different ways. 3. The life cycle functions are different. 4. Vue2.0 has deleted all the built-in filters in vue1.0. To use filters in vue2.0, you need to customize them, but vue1.0 does not.

What is the difference between vuejs1.0 and 2.0

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

1. In each component template, the fragment code that no longer supports

VUE1.0 is:

<template>
  <h3>我是组件</h3><strong>我是加粗标签</strong>
</template>

Copy after login

VUE2. 0: There must be a root element that wraps all the code

<template id="aaa">
  <div>
    <h3>我是组件</h3>
      <strong>我是加粗标签</strong>
   </div>
</template>

Copy after login

2. Different ways of defining components

The way VUE1.0 defines components There are:

Vue.extend This method is available in 2.0, but there are some changes

Vue.component(组件名称,{  在2.0继续能用
  data(){}
  methods:{}
  template:
});

Copy after login

The way VUE2.0 defines components is simpler

var Home={
    template:&#39;&#39;    ->  相当于Vue.extend()
};

Copy after login

3. Life cycle changes

1. Life cycle of 1.0:

##initThe component has just been created, but the Data, method and other attributes have not been calculated yetcreatedComponent creation has been completed, but the DOM has not yet been generatedbeforeCompileBefore template compilationcompiledAfter template compilationreadyComponent preparation (usually used more)attachedCalled when vm.$el is inserted into the DOMdetachedIn vm.$el Called when deleted from the DOMbeforeDestoryBefore the component is destroyeddestoryedAfter the component is destroyed

Cycle	Explanation

The following picture is the official flow chart about the 1.0 life cycle:

What is the difference between vuejs1.0 and 2.0 # #2. Life cycle of 2.0

CyclebeforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedactivateddeactivatedbeforeDestory destroyed

下图是官方关于2.0生命周期的流程图：
What is the difference between vuejs1.0 and 2.0

借用一位大神的图来总结他们的变化：
What is the difference between vuejs1.0 and 2.0

2.0生命生命周期变化感觉变得更加语义化一点（有规律可寻，更好记了），而且增加了beforeUpdate、updated、activated、deactivated，删除了attached、detached。

四、过滤器

2.0将1.0所有自带的过滤器都删除了，也就是说，在2.0中，要使用过滤器，则需要我们自己编写，以下是一个自定义过滤器示例,

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

Copy after login

如果想展示JSON数据，不需要调用过滤器了，框架会自动帮我们解析出来；
2.0过滤器的传参方式不是以前的方式，是以函数传参的方式，下面示例：

之前调用:       {{msg | mimi &#39;12&#39; &#39;5&#39;}}
现在调用:   {{msg | mimi(&#39;12&#39;,&#39;5&#39;)}}

Copy after login

五、循环

刚学vue1.0的人可能会碰到一个错误信息：

What is the difference between vuejs1.0 and 2.0

这里提示我们要使用tranck-by=”$index”，这个属性也可以帮我们提高for循环的性能，而在2.0，使用重复数据将不会报错，同时也去掉了一些隐式变量如：index、key，那我们如果要用到这些数据则可以通过ES6的语法来获取

v-for="(val,index) in array"

Copy after login

关于整数循环，1.0的整数循环是从0开始的，2.0的整数循环是从1开始的，下面对比：

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

Copy after login

运行结果：
What is the difference between vuejs1.0 and 2.0

What is the difference between vuejs1.0 and 2.0

四、片段代码

编写template的时候，2.0必须要用一个根元素（如p）将代码片段包裹起来，否则报错。

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

Copy after login

Explanation
The component has just been created, but the Data, method and other attributes have not been calculated yet
The component creation has been completed, but the DOM has not been calculated yet Generated
Before template compilation
After template compilation, component preparation
Before the component is updated (when data etc. change)
After the component is updated (When data etc. change)
for keep-alive, called when the component is activated
for keep-alive, called when the component is removed
Before the component is destroyed
After the component is destroyed