Vue.js组件生命周期

export default {
    name: 'LifecycleDemo',

    beforeCreate() {
        console.log('=== beforeCreate ===');
        console.log('数据观测还未建立');
        console.log('$data:', this.$data); // undefined
        console.log('$el:', this.$el);     // undefined
        console.log('methods:', this.myMethod); // undefined

        // 无法访问组件数据和方法
        // console.log(this.message); // 会报错

        // 可以访问组件选项
        console.log('组件名:', this.$options.name);

        // 通常用于插件初始化
        this.initPlugin();
    },

    methods: {
        initPlugin() {
            console.log('初始化插件');
        }
    }
};
                                

export default {
    name: 'LifecycleDemo',

    data() {
        return {
            message: 'Hello Vue!',
            items: [],
            loading: false
        };
    },

    computed: {
        reversedMessage() {
            return this.message.split('').reverse().join('');
        }
    },

    created() {
        console.log('=== created ===');
        console.log('数据观测已建立');
        console.log('$data:', this.$data); // 可以访问
        console.log('message:', this.message); // 'Hello Vue!'
        console.log('computed:', this.reversedMessage); // '!euV olleH'

        // DOM元素仍然不可访问
        console.log('$el:', this.$el); // undefined

        // 最常见的用途：发起API请求
        this.fetchData();

        // 设置事件监听
        window.addEventListener('resize', this.handleResize);

        // 初始化定时器
        this.timer = setInterval(() => {
            console.log('定时器执行');
        }, 1000);
    },

    methods: {
        fetchData() {
            this.loading = true;
            // 模拟API请求
            setTimeout(() => {
                this.items = [
                    { id: 1, name: 'Vue.js' },
                    { id: 2, name: 'React' },
                    { id: 3, name: 'Angular' }
                ];
                this.loading = false;
            }, 1500);
        },

        handleResize() {
            console.log('窗口大小改变');
        }
    }
};
                                

export default {
    name: 'LifecycleDemo',

    data() {
        return {
            message: '准备挂载'
        };
    },

    beforeMount() {
        console.log('=== beforeMount ===');
        console.log('模板编译已完成');
        console.log('$el:', this.$el); // 仍然指向挂载点元素，不是组件内容

        // 可以访问数据
        console.log('message:', this.message); // '准备挂载'

        // 无法访问渲染后的DOM
        // console.log(document.querySelector('.content')); // null

        // 适合执行挂载前的最后配置
        this.prepareForMount();
    },

    methods: {
        prepareForMount() {
            console.log('准备挂载...');
            // 可以在这里修改数据，但不会触发额外的重新渲染
            this.message = '即将挂载';
        }
    },

    template: `
        <div class="content">
            {{ message }}
        </div>
    `
};
                                

export default {
    name: 'LifecycleDemo',

    data() {
        return {
            message: '已挂载',
            width: 0,
            height: 0
        };
    },

    mounted() {
        console.log('=== mounted ===');
        console.log('实例已挂载到DOM');
        console.log('$el:', this.$el); // 渲染后的DOM元素
        console.log('组件内容:', this.$el.innerHTML);

        // 可以访问DOM元素
        const contentEl = this.$el.querySelector('.content');
        console.log('内容元素:', contentEl);

        // 获取DOM尺寸
        this.width = this.$el.offsetWidth;
        this.height = this.$el.offsetHeight;
        console.log('组件尺寸:', this.width, 'x', this.height);

        // 初始化第三方库（如图表库、地图等）
        this.initChart();
        this.initMap();

        // 添加DOM事件监听
        this.$el.addEventListener('click', this.handleClick);

        // 设置焦点
        if (this.$refs.input) {
            this.$refs.input.focus();
        }
    },

    methods: {
        initChart() {
            // 初始化图表库，如ECharts、Chart.js等
            console.log('初始化图表库');
            // this.chart = echarts.init(this.$el.querySelector('.chart-container'));
        },

        initMap() {
            // 初始化地图库
            console.log('初始化地图');
        },

        handleClick(event) {
            console.log('组件被点击', event.target);
        }
    },

    template: `
        <div class="lifecycle-demo">
            <div class="content">{{ message }}</div>
            <div class="chart-container" ref="chart"></div>
            <input ref="input" type="text" placeholder="获得焦点">
            <p>宽度: {{ width }}px, 高度: {{ height }}px</p>
        </div>
    `
};
                                

export default {
    name: 'LifecycleDemo',

    data() {
        return {
            count: 0,
            previousCount: 0,
            updateLog: []
        };
    },

    beforeUpdate() {
        console.log('=== beforeUpdate ===');
        console.log('数据已更新，DOM尚未重新渲染');
        console.log('count:', this.count);

        // 保存更新前的状态
        this.previousCount = this.count - 1;

        // 获取更新前的DOM信息
        const countElement = this.$el.querySelector('.count-value');
        if (countElement) {
            console.log('DOM中的旧值:', countElement.textContent);
        }

        // 记录更新日志
        this.updateLog.push({
            timestamp: new Date().toISOString(),
            from: this.previousCount,
            to: this.count,
            phase: 'beforeUpdate'
        });

        // 可以在这里取消不必要的更新
        if (this.count > 100) {
            console.warn('计数超过限制，取消更新');
            // 注意：不能在这里直接修改触发更新的数据
            // 否则会导致无限循环
        }
    },

    methods: {
        increment() {
            this.count++;
        },

        decrement() {
            this.count--;
        }
    },

    template: `
        <div>
            <button @click="decrement">-</button>
            <span class="count-value">{{ count }}</span>
            <button @click="increment">+</button>
            <div>更新日志: {{ updateLog.length }} 条</div>
        </div>
    `
};
                                

export default {
    name: 'LifecycleDemo',

    data() {
        return {
            count: 0,
            width: 0,
            chartData: [],
            chartInstance: null
        };
    },

    updated() {
        console.log('=== updated ===');
        console.log('DOM已重新渲染');
        console.log('count:', this.count);

        // 获取更新后的DOM信息
        const countElement = this.$el.querySelector('.count-value');
        if (countElement) {
            console.log('DOM中的新值:', countElement.textContent);
        }

        // 更新组件尺寸
        this.updateDimensions();

        // 更新图表数据
        this.updateChart();

        // 滚动到最新内容
        this.scrollToBottom();

        // 注意：不要在这里修改触发更新的数据，否则会导致无限循环
        // ❌ 错误示例：this.count = this.count + 1;

        // 可以使用nextTick确保DOM更新完成
        this.$nextTick(() => {
            console.log('DOM更新确认完成');
            this.performPostUpdateOperations();
        });
    },

    methods: {
        updateDimensions() {
            this.width = this.$el.offsetWidth;
            console.log('更新后宽度:', this.width);
        },

        updateChart() {
            if (this.chartInstance) {
                // 更新图表数据
                this.chartInstance.setOption({
                    series: [{
                        data: this.chartData
                    }]
                });
            }
        },

        scrollToBottom() {
            const container = this.$el.querySelector('.log-container');
            if (container) {
                container.scrollTop = container.scrollHeight;
            }
        },

        performPostUpdateOperations() {
            // DOM更新后的操作
            console.log('执行更新后操作');
        }
    }
};
                                

export default {
    name: 'LifecycleDemo',

    data() {
        return {
            timer: null,
            eventListeners: [],
            subscriptions: []
        };
    },

    created() {
        // 创建定时器
        this.timer = setInterval(() => {
            console.log('定时器运行中...');
        }, 1000);

        // 添加事件监听
        window.addEventListener('resize', this.handleResize);
        this.eventListeners.push(['resize', this.handleResize]);

        // 创建WebSocket连接
        this.connectWebSocket();
    },

    beforeDestroy() {
        console.log('=== beforeDestroy ===');
        console.log('实例即将销毁，清理资源');

        // 1. 清理定时器
        if (this.timer) {
            clearInterval(this.timer);
            this.timer = null;
            console.log('定时器已清理');
        }

        // 2. 移除事件监听
        this.eventListeners.forEach(([event, handler]) => {
            window.removeEventListener(event, handler);
        });
        this.eventListeners = [];
        console.log('事件监听已移除');

        // 3. 取消API请求
        if (this.requestController) {
            this.requestController.abort();
            console.log('API请求已取消');
        }

        // 4. 断开WebSocket连接
        this.disconnectWebSocket();

        // 5. 清理第三方库实例
        if (this.chartInstance) {
            this.chartInstance.dispose();
            this.chartInstance = null;
            console.log('图表实例已清理');
        }

        // 6. 取消订阅
        this.subscriptions.forEach(subscription => {
            subscription.unsubscribe();
        });
        this.subscriptions = [];

        // 7. 清理DOM引用
        this.$refs = {};

        // 8. 通知父组件或其他组件
        this.$emit('component-will-destroy', this.componentId);

        // 可以访问数据和方法的最后机会
        console.log('最后的数据:', this.$data);
        this.saveState();
    },

    methods: {
        handleResize() {
            console.log('窗口大小改变');
        },

        connectWebSocket() {
            // 模拟WebSocket连接
            console.log('WebSocket连接已建立');
        },

        disconnectWebSocket() {
            console.log('WebSocket连接已断开');
        },

        saveState() {
            // 保存组件状态到localStorage
            localStorage.setItem('component-state', JSON.stringify(this.$data));
        }
    }
};
                                

export default {
    name: 'LifecycleDemo',

    data() {
        return {
            componentId: 'demo-' + Date.now(),
            isDestroyed: false
        };
    },

    destroyed() {
        console.log('=== destroyed ===');
        console.log('实例已完全销毁');

        // 此时组件已不可用
        console.log('$el:', this.$el); // null
        console.log('$data:', this.$data); // 仍然可以访问，但不应该再使用

        // 标记组件已销毁
        this.isDestroyed = true;

        // 清理全局引用
        const globalKey = `component_${this.componentId}`;
        if (window[globalKey]) {
            delete window[globalKey];
        }

        // 通知全局事件总线
        if (this.$root.eventBus) {
            this.$root.eventBus.$emit('component-destroyed', this.componentId);
        }

        // 清理可能的内存泄漏
        this.cleanupMemoryLeaks();

        // 记录销毁日志
        this.logDestruction();

        // 注意：此时不能再调用组件的方法或访问DOM
        // ❌ 错误示例：this.$el.querySelector('...');
        // ❌ 错误示例：this.someMethod();
    },

    methods: {
        cleanupMemoryLeaks() {
            // 清理可能的内存泄漏
            console.log('清理潜在的内存泄漏');

            // 清理闭包中的引用
            this.callbacks = null;
            this.handlers = null;

            // 清理大对象
            this.largeData = null;
            this.buffers = null;
        },

        logDestruction() {
            // 记录销毁信息（可以发送到服务器）
            const logEntry = {
                component: this.$options.name,
                id: this.componentId,
                destroyedAt: new Date().toISOString(),
                duration: Date.now() - this.createdAt
            };

            console.log('销毁日志:', logEntry);

            // 在实际应用中，可以发送到服务器
            // this.$http.post('/api/logs/destruction', logEntry);
        }
    },

    created() {
        this.createdAt = Date.now();
    }
};