Using the index

<body> <div id="app"> <div> <span>{{arr}}</span> <ul> <li v-for="(value, index) in arr" :key="index"> <test :val="value" /> </li> </ul> <button @click="handleUnshift">unshift</button> <button @click="handlePush">push</button> <button @click="handleDelete">delete</button> <button @click="handleReset">reset</button> </div> </div> <script src=".. /.. /dist/vue.js"></script> <script> var list = [] var vm = new Vue({ el: '#app', data() { return { arr: [1, 2, 3], cur: 4}; }, beforeUpdate() {console.log(" parent component.beforeupdate "); }, methods: { handleUnshift() { this.arr.splice(0, 0, this.cur++); }, handlePush() { this.arr.push(this.cur++); }, handleDelete() { this.arr.splice(1, 1) }, handleReset() { this.arr = [1, 2, 3] this.cur = 4 } }, components: { test: {beforeUpdate() {console.log(" child component.beforeUpdate "); }, props: { val: Number }, // template: "<li>{{val}}</li>", template: "<li>{{Math.random()}}</li>" } } }) </script> </body>Copy the code

Add from the tail

Looks like they’re being added in sequence, no problem!

Add from the header

It looks like we’re doing the same push, right?

Delete the second element

The first time you delete, you want to delete the second element, but you delete the last element?

Use Math. The random ()

<body> <div id="app"> <div> <span>{{arr}}</span> <ul> <li v-for="(value, index) in arr" :key="Math.random()"> <test :val="value" /> </li> </ul> <button @click="handleUnshift">unshift</button> <button @click="handleDelete">delete</button> </div> </div> <script src=".. /.. /dist/vue.js"></script> <script> var list = [] var vm = new Vue({ el: '#app', data() { return { arr: [1, 2, 3], cur: 4}; }, beforeUpdate() {console.log(" parent component.beforeupdate "); }, methods: { handleUnshift() { this.arr.splice(0, 0, this.cur++); }, handleDelete() { this.arr.splice(1, 1) } }, components: { test: { updated() { console.log("updated.1"); }, props: { val: Number }, // template: "<li>{{val}}</li>", template: "<li>{{Math.random()}}</li>" } } }) </script> </body>Copy the code

It seems that no matter what the operation is, there is no reuse at all…

Inversion array

<body> <div id="app"> <div> <span>{{arr}}</span> <ul> <li v-for="(value, <test :val="value" /> </li> </ul> < button@click ="this.handleDelete"> </button> </div> </div> <script src=".. /.. /dist/vue.js"></script> <script> var list = [] var vm = new Vue({ el: '#app', data() { return { arr: [1, 2, 3], cur: 4}; }, beforeUpdate() {console.log(" parent component.beforeupdate "); }, methods: { handleDelete() { this.arr.reverse() } }, components: { test: {beforeUpdate() {console.log(" child component.beforeUpdate "); }, props: { val: Number }, // template: "<li>{{val}}</li>", template: "<li>{{Math.random()}}</li>" } } }) </script> </body>Copy the code

Reversing the array does not cause any changes to the page