Since the object is a reference type address, modifying the object property watch will not monitor
the difference between value type and reference type#
(1) Value type:
1. Occupies a fixed space and is stored in the stack (when a method is executed, each method will create its own memory stack, and the variables defined in this method will be put into this stack memory one by one. As the execution of the method ends, the memory stack of this method will also be destroyed naturally. Therefore, all variables defined in the method The variables in the stack are all stored in the stack memory; the stack stores basic variables and reference variables of some objects, the value of the basic variables is stored in the stack, and the reference variables stored in the stack point to arrays in the heap or The address of the object, which is why modifying the reference type will always affect other reference variables pointing to this address.)
2. What is saved and copied is the value itself
3. Use typeof to detect the type of data
4. The basic type of data is a value type
(2 ) reference type:
1. The occupied space is not fixed and stored in the heap (when we create an object in the program, the object will be saved in the runtime data area for repeated use (because the creation cost of the object is usually large), this runtime The time data area is the heap memory. The object in the heap memory will not be destroyed with the end of the method. Even after the method ends, this object may be referenced by another reference variable (it is very common when the parameter of the method is passed), then the object It will still not be destroyed, only when an object does not have any reference variables to refer to it, the system's garbage collection mechanism will recycle it when verifying.) 2. What is
saved and copied is a pointer to the object
3. Use instanceof to detect Data type
4. Objects constructed using the new() method are reference types
watch: {
'$store.state.initQuery':{
// 立即监听
immediate: true,
// 深度监听
deep: true,
handler(val){
console.log('ewqqweeqw',val);
}
}
},
checked: {
sos: true,
blood: true,
heartRate: true,
temperature: true,
},
watch: {
checked: {
handler(newValue) {
this.handlerShow(newValue);
},
deep: true,
},
},
/**
* 判断显示什么
* 传 this.checked
*/
handlerShow(newValue) {
this.alarmList = [];
if (newValue.sos) {
this.alarmList.push(...this.sosAlarmList);
}
if (newValue.heartRate) {
this.alarmList.push(...this.heartAlarmList);
}
if (newValue.blood) {
this.alarmList.push(...this.oxyAlarmList);
}
if (newValue.temperature) {
this.alarmList.push(...this.temperatureList);
}
},
deep: true, it is deep monitoring, and handler is a function written in this way.
For myself: When the backend returns different types of lists, add a newlist to the variable, and assign different values to the newlist after clicking, so that there is data to display, and no data is not displayed, so as to solve the same large list. Different options, there is no data to solve the problem.
2. It can also be like this