Solve the problem that subcomponents will not be destroyed through setTimeout

Project description

Code parameter description

this.preview=true/false To control whether the sub components are rendered
this.previewUrl To control the rendering of the newly rendered images in the self-assembly url

    private handleItemPreviewClick(url) {
    
        this.showPreview = false;
        setTimeout(() => {
    
            this.previewUrl = url;
            this.showPreview = true;
        }, 0);
    }

	//  Lifecycle functions for subcomponents 
    public destroyed(): void {
    
        console.log(' The destruction ');
    }

At this point, when we trigger the parent component handleItemPreviewClick Function, the sub components will be destroyed
This is because ： When we're done this.showPreview = false; setTimeout The code in will be placed in the macro task queue , The code in the page will not be executed until the page is re rendered

Error code cases

    private handleItemPreviewClick(url) {
    
        this.showPreview = false;
        this.previewUrl = url;
        this.showPreview = true;
    }

	//  Lifecycle functions for subcomponents 
    public destroyed(): void {
    
        console.log(' The destruction ');
    }

At this point, when we trigger the parent component handleItemPreviewClick Function time subcomponent Can't To destroy
This is because ： When we're done this.showPreview = false; Immediately afterwards, it was carried out again this.showPreview = true;, When the code is finished Browser discovery showPreview The value of has not changed , The subcomponents will not be destroyed