Mutation method of VUE array (change method)

In Vue, modifying the value of an object property directly cannot trigger a response. When you directly modify the value of the object attribute, you will find that only the data has been changed, but the page content has not changed

Array and object are a reference type, and the view layer and model layer are responsive. Why can't we display them in the viewport layer in our traditional practice?
Because we didn't change the address at all
Adding or modifying an array by indexing does not change the address of the array
And the push method itself does not modify the address of the array
However, the method of these operations has been changed in vue
These methods are called VUE's variation method (change method)
Also known as the responsive method of modifying array data

1, Conclusion

Do not modify the array and the current object directly through the index or key name, because it will not take effect
Arrays and objects are reference types. If the address does not change, there will be no response
In case you have to modify it by index or key name, you can use VM$ Set() or ivue Set() method

2, Use steps

1.1. Mutation method hook of array

• VUE mutated these methods To ensure the normal use of the original functions

hook	meaning
push()	Add an element to the last side of the array and successfully return the length of the current array
pop()	Delete the last element of the array and return the value of the deleted element successfully
shift()	Delete the first element of the array and return the value of the deleted element successfully
unshift()	Add an element to the front of the array and successfully return the length of the current array
splice()	There are three parameters. The first is the subscript of the element to be deleted (required), the second is the number of elements to be deleted (required), and the third is the value to be replaced in the original position after deletion
sort()	sort() sorts the array from small to large by default according to the character encoding, and returns the sorted array successfully
reverse()	reverse() reverses the array and returns the inverted array successfully

The above seven arrays will change the original array. Let's explain their differences:
var list = [3,4,5,6]
push() Add several elements to the tail of the array and return the new length of the array;
list.push(7,8)    //Returns the length of the array 6
list              //list=[3,4,5,6,7,8]
2. pop() Delete an element from the end of the array (delete and delete only one element), and return the deleted element
list.pop()    //Returns the deleted array 6
list          //list=[3,4,5]
3. unshift() Add several elements to the header of the array and return the new length of the array
list.unshift(1,2)    //Returns the length of the array 6
list                 //list=[1,2,3,4,5,6]
4. shift() Delete an element from the header of the array (delete and delete only one element), and return the deleted element
list.shift()        //Return deleted element 3
list                //list=[4,5,6]
ps:
pop()and shift()The method does not accept parameters, and it is useless to pass parameters
 Empty array can be deleted without error, but it returns undefined
5. splice() This method has the following three uses:
Delete - any number of items can be deleted. Only two parameters need to be specified: the position of the first item to be deleted and the number of items to be deleted.
Insert - you can insert any number of items into the specified location. You only need to provide three parameters: insert starting position, 0 (number of items to be deleted) and items to be inserted. If you want to insert multiple items, you can pass in the fourth and fifth items to any number of items.
Replace - you can insert any number of items into the specified location and delete any number of items at the same time. You only need to specify three specified parameters: starting location, number of items to delete and any number of items to insert. The number of items inserted does not have to be equal to the number of items deleted.
var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1);  //Delete the first item
alert(colors);  //green,blue
alert(removed);  //red, the value in the returned array contains one item
removed = colors.splice(1, 0, "yellow", "orange");  //Insert two items from position 1
alert(colors);  //green,yellow,organge,blue
alert(removed);  //An empty array is returned
removed = colors.splice(1, 1, "red", "purple");  //Insert two items and delete one
alert(colors);  //green,red,purple,orange,blue
alert(remove);  //yellow, the returned array contains only one item
6. sort() This method is used to sort the elements of the array
list:["George","John","Thomas","James","Adrew","Martin"]；
list.sort();        //["Adrew", "George", "James", "John", "Martin", "Thomas"]
ps: because sort()By default, sorting is based on strings UniCode Code to sort, so if you want to sort numbers, the parameter should pass a comparison function
list:["100","24","489","22","307","6"]；
sortNumber(a,b){
      return a-b
}；
list.sort(sortNumber)    //["6", "22", "24", "100", "307", "489"]
7. reverse() This method is used to reverse the order of the elements in the array
list:["kwz","John","Thomas","James","Adrew","Martin"]
list.reverse();    //["Martin", "Adrew", "James", "Thomas", "John", "kwz"]

1.2 replace array (return new array)

• The original array is not changed, but a new array is always returned

method	meaning
filter	The filter() method creates a new array. The elements in the new array are checked by checking all the qualified elements in the specified array.
map	The map() method returns the selected element from an existing array. This method does not modify the array, but returns a sub array
concat	The concat() method is used to connect two or more arrays. This method does not change the existing array
slice	The slice() method returns the selected element from an existing array. This method does not modify the array, but returns a sub array

methods:{
          change(id) {
          //Filter filter method
          this.fruit=this.fruit.filter(function(value,index){
			return    value.id != id
			})
Usually when we do the delete option,Click to delete the corresponding id after,Filter,The new array returned is all not equal to this id Project.
		//map mapping method
		
            this.fruit = this.fruit.map(function (value, index) {
              return value + "~~~~";
            });
 If necessary, add an array to all the data in the array or object,This method is very suitable for use
}

1.3 dynamic array responsive data

• Vue.set(a,b,c) to update the trigger view again and make the data dynamic
• a is the data to be changed, b is the item of the data, and c is the changed data

	this.fruit[3]="lemon" Can't change because the address hasn't been changed
		this.fruit.push("lemon")
	VM			item term	index Indexes  value value
	this.$set(this.fruit, 3, "lemon");
     Vue.set(this.fruit, 3, "lemon");
	
			item term   key key     value value
   vm.$set(person, "gender", "nan");
   Vue.set(person, "hobby", "play golf");

summary

Splice is called the most powerful method in the array. It has the functions of deletion, addition and replacement. It can be updated with splice,
delete
The first two values represent deletion. They are the index number of the position to be deleted and the item to be deleted
In short, it means where to start and how much to delete
add to
If you want to add, the first value is given to the corresponding index number. In front of this index number, add, the second value is given to 0, and then write the third value, the fourth value and the fifth value (depending on how many you want to insert)
Delete before add
Learn from the above operation to give a better understanding of the code
In front of what?, How much? Spell in what?
colors.splice(1, 1, "red", "purple")