The reason why computed was not triggered in Vue and the troubleshooting experience

Computered's cause troubleshooting experience

Computed computed attributes in vue can be used to bind dynamic variables, and they can be refreshed in real time and can also be monitored in watch. Therefore, I like to use this thing very much. Generally, all attributes that need to change with the variables in data are placed here. Only variables that are independent and do not affect each other are defined in data. This can greatly reduce the definition of duplicate variables, make the code structure clear, and facilitate troubleshooting of errors.

A problem has occurred recently

It is a dynamic variable I defined in computed that does not trigger updates after the relevant attribute changes.

The code is as follows:

data(){
	return {
		model:{
			name:"test"
		}
	}
}

computed:{
	lonexist:function(){
		return !=null;
	}
}

method:{
	changelon(){
		="123";
	}
}

The above is just simplifying the code, the purpose is to illustrate the problem. Then I bind the changelon method in a button click event. After clicking the button, the lonexist calculation attribute is not triggered.

The reason is

This property does not exist when model is initialized. The solution is to add this property to the model's initialization method:

data(){
	return {
		model:{
			name:"test"，
			lon:null
		}
	}
}

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.