1. Life cycle
1. Life cycle of 1.0:
| cycle | explain |
|---|---|
| init | The component has just been created, but the properties such as Data, method, etc. have not been calculated yet |
| created | Component creation has been completed, but the DOM has not 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 | Called when vm.$el is removed from the DOM |
| beforeDestory | Before the component is destroyed |
| destoryed | After the component is destroyed |
The following figure is the official flow chart of the 1.0 life cycle:
2. The life cycle of 2.0
| cycle | explain |
|---|---|
| beforeCreate | The component has just been created, but the properties such as Data, method, etc. have not been calculated yet |
| created | Component creation has been completed, but the DOM has not been generated |
| beforeMount | Before template compilation |
| mounted | After the template is compiled, the component is ready |
| beforeUpdate | Before component update (when data etc. change) |
| updated | After the component is updated (when data, etc. changes) |
| activated | for keep-alive, called when the component is activated |
| deactivated | for keep-alive, called when the component is removed |
| beforeDestory | Before the component is destroyed |
| destoryed | After the component is destroyed
|
The following figure is the official flow chart of the 2.0 life cycle:
To summarize their changes by borrowing a picture of a great god:
The 2.0 life cycle changes feel more semantic (regular to find, easier to remember), and beforeUpdate, updated, activated, deactivated are added, and attached and detached are deleted.
Two: filter
2.0 deletes all the filters that come with 1.0, that is to say, in 2.0, to use filters, we need to write our own, the following is an example of a custom filter,
1 Vue.filter('toDou',function(n,a,b){ 2 return n<10?n+a+b:''+n; 3 });
If you want to display JSON data, you don't need to call the filter, and the framework will automatically parse it for us;
the 2.0 filter's parameter-passing method is not the previous method, but a function-passing method. The following example:
Previously called : {{msg | mimi '12' '5'}} Now called : {{msg | mimi('12','5')}}
Three: cycle
People who are just learning vue1.0 may encounter an error message:
Here we are prompted to use tranck-by=”$index”. This attribute can also help us improve the performance of the for loop. In 2.0, using repeated data will not report an error, and some implicit variables such as index, key, then if we want to use these data, we can get it through ES6 syntax
v-for="(val,index) in array"
Regarding the integer cycle, the integer cycle of 1.0 starts from 0, and the integer cycle of 2.0 starts from 1. The following comparison:
1 //HTML代码 2 <ul id='box'> 3 <li v-for='val in 5' v-text='val'></li> 4 </ul>
operation result:
4. Fragment code
When writing a template, 2.0 must wrap the code snippet with a root element (such as div), otherwise an error will be reported
1 before: no problem with 1.0 2 <template> 3 <h3>I am a component</h3><strong>I am a bold tag</strong> 4 </template> 5Now : must have root element, Wrap all the code 6 <template id="aaa"> 7 <div> 8 <h3>I am a component</h3> 9 <strong>I am a bold tag</strong> 10 </div> 11 </ template>
Five: interpolation syntax {{}}
2.0 deprecated the syntax of {{}}, and inserting data using {{}} in the tag will be invalid.
1 // HTML code 2 <h3>{{msg}}</h3> 3 4 5 // js code 6 var vm = new Vue({ 7 el:'#box' , 8 data:{ 9 msg:'YOYOYOYO ' 10 }, 11 methods: { 12 13 } 14 })
operation result:
The above is just a list of some of the changes. Generally speaking, the changes from vue upgrade to 2.0 are not that big (angular version phobia), and there are some new changes to be added after climbing the pit ( • ̀ω•́ )✧
Original source: https://blog.csdn.net/a895865025/article/details/74331626