When Vue is performing in-depth interception of complex data types such as values/objects, if you do not process it a little, the old and new values of the in-depth interception will be exactly the same, affecting the processing of some businesses.
In the previous blog, I have explained the scene clearly, this issue will only write the handling method, and continue to use the previous code.
Only need to add a calculated attribute.
<div id="app">
<h3>{
{computedObj}}</h3>
<button @click='obj[0].name = "CreatorRay" '>改变</button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
obj:[{
name:'Ray'}]
},
computed: {
computedObj:function(){
return this.obj[0].name;
}
},
watch:{
'computedObj':{
deep:true,
handler(newV,oldV){
console.log('newV',newV);
console.log('oldV',oldV);
},
}
}
});
</script>
Just to provide you with a solution, it is indeed necessary to use the old value for some processing in some scenarios.
If it is not the old value that must be used, don't deal with it casually, it will forcefully break the prototype chain, and adding one more calculation attribute will also affect performance.
If you don’t understand why, you can look at the blog of the previous issue. There was a small problem in the previous issue. Because of the longer space, a separate issue was posted.
There is a WeChat mini program course design, complete design needs, contact personal QQ: 505417246
Pay attention to the following WeChat public account, you can receive WeChat applet, Vue, TypeScript, front-end, uni-app, full stack, Nodejs, Python and other practical learning materials. The
latest and most complete front-end knowledge summary and project source code will be released to the WeChat public as soon as possible No., please pay attention, thank you!
