通过setTimeout解决子组件不会销毁的问题

项目描述

代码参数说明

this.preview=true/false 来控制子组件是否渲染出来
this.previewUrl 来控制新渲染出来的自组建中图片的url

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

	// 子组件的生命周期函数
    public destroyed(): void {
    
        console.log('销毁');
    }

此时当我们触发父组件的handleItemPreviewClick函数时子组件会进行销毁
这是因为：当我们执行完this.showPreview = false; setTimeout中的代码会放到宏任务队列中，当页面重新渲染完才会执行里边的代码

错误代码案例

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

	// 子组件的生命周期函数
    public destroyed(): void {
    
        console.log('销毁');
    }

此时当我们触发父组件的handleItemPreviewClick函数时子组件不会进行销毁
这是因为：当我们执行完this.showPreview = false; 后立马又执行了this.showPreview = true;，当代码都执行完了 浏览器发现showPreview的值并没有变化，子组件也就不会被销毁了