Shulou(Shulou.com)06/03 Report--

This article will explain in detail the differences between vuejs1.0 and 2.0. the editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Differences: 1. All code must be wrapped in root elements in VUE2.0, not in VUE1.0. 2. Components are defined in different ways. 3. The life cycle function is different. 4. Vue2.0 removes all the filters that come with vue1.0. Vue2.0 needs customization to use the filter, but vue1.0 does not.

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

First, in each component template, snippet code is no longer supported

VUE1.0 is:

I'm the component. I'm the bold tag.

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

I'm the component. I'm the bold tag.

Second, components are defined in different ways

VUE1.0 defines components in the following ways:

The Vue.extend approach is available in 2.0, but there are some changes.

Vue.component (component name, {data () {} methods: {} template:})

The way VUE2.0 defines components is much simpler.

Var Home= {template:''-> is equivalent to Vue.extend ()}

III. Changes in the life cycle

1.0Lifecycle: cycle interpretation init component has just been created, but Data, method and other properties have not been calculated. Created component creation has been completed, but DOM has not been generated before beforeCompile template compilation. After compiled template compilation, ready component preparation (usually used more) attached calls detached when vm.$el is inserted into DOM, beforeDestory component is called when vm.$el is deleted from DOM, after destoryed component is destroyed.

The following is an official flowchart of the 1.0 lifecycle:

2. The life cycle of 2.0 explains that the beforeCreate component has just been created, but the properties such as Data and method have not been calculated yet. The created component creation has been completed. But the DOM has not been generated before the beforeMount template is compiled, after the mounted template is compiled, before the component is ready for the beforeUpdate component update (when the data changes, etc.) after the updated component is updated (when the data changes, etc.) activatedfor keep-alive, when the component is activated, the deactivatedfor keep-alive is called, when the component is removed, the beforeDestory component is called before the destoryed component is destroyed.

The following is the official flowchart of the 2.0 lifecycle:

Borrow the picture of a great god to sum up their changes:

Life cycle changes feel a little more semantic (regular, easy to remember), and beforeUpdate, updated, activated, deactivated have been added, and attached and detached have been deleted.

IV. Filter

2.0 removes all the filters that come with 1.0, that is, in 2.0, to use a filter, you need to write it ourselves. here is an example of a custom filter.

Vue.filter ('toDou',function (n return a) b) {Magna n

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.