What is the difference between vuejs1.0 and 2.0

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.

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:

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

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: });

The way VUE2.0 defines components is simpler

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

3. Life cycle changes

1. Life cycle of 1.0:

##init The component has just been created, but the Data, method and other attributes have not been calculated yet created Component creation has been completed, but the DOM has not yet been generated 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 In vm.$el Called when deleted from the DOM beforeDestory Before the component is destroyed destoryed After the component is destroyed

Cycle	Explanation

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

# #2. Life cycle of 2.0

下图是官方关于2.0生命周期的流程图：

借用一位大神的图来总结他们的变化：

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

四、过滤器

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

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

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

之前调用: {{msg | mimi '12' '5'}} 现在调用: {{msg | mimi('12','5')}}

五、循环

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

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

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

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

//HTML代码 
 
 

运行结果：

四、片段代码

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

之前: 在1.0使用时完全没问题  现在: 必须有根元素，包裹住所有的代码 

相关推荐：《vue.js教程》

Cycle beforeCreate created beforeMount mounted beforeUpdate updated activated deactivated beforeDestory destroyed

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

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