第16集Vue双向绑定原理实践

// MVVM架构示例
class MVVMPattern {
    constructor() {
        this.model = {
            message: 'Hello Vue!',
            count: 0,
            user: {
                name: '张三',
                age: 25
            }
        };
        
        this.view = null;
        this.viewModel = null;
    }
    
    // Model层：数据模型
    updateModel(key, value) {
        this.model[key] = value;
        this.notifyView();
    }
    
    // View层：视图更新
    updateView(data) {
        console.log('视图更新:', data);
        // 实际项目中这里会更新DOM
    }
    
    // ViewModel层：连接Model和View
    notifyView() {
        this.updateView(this.model);
    }
}

// 使用示例
const mvvm = new MVVMPattern();
mvvm.updateModel('message', 'Hello World!');

// Vue 2响应式系统实现
class Vue2Reactive {
    constructor(data) {
        this.data = data;
        this.dep = new Dep();
        this.observe(data);
    }
    
    observe(data) {
        if (!data || typeof data !== 'object') {
            return;
        }
        
        Object.keys(data).forEach(key => {
            this.defineReactive(data, key, data[key]);
        });
    }
    
    defineReactive(obj, key, val) {
        const dep = new Dep();
        
        // 递归观察子对象
        this.observe(val);
        
        Object.defineProperty(obj, key, {
            enumerable: true,
            configurable: true,
            get() {
                // 收集依赖
                if (Dep.target) {
                    dep.addSub(Dep.target);
                }
                return val;
            },
            set(newVal) {
                if (newVal === val) return;
                
                val = newVal;
                // 递归观察新值
                this.observe(newVal);
                // 通知依赖更新
                dep.notify();
            }
        });
    }
}

// 依赖收集器
class Dep {
    constructor() {
        this.subs = [];
    }
    
    addSub(sub) {
        this.subs.push(sub);
    }
    
    notify() {
        this.subs.forEach(sub => sub.update());
    }
}

// 观察者
class Watcher {
    constructor(vm, exp, cb) {
        this.vm = vm;
        this.exp = exp;
        this.cb = cb;
        this.value = this.get();
    }
    
    get() {
        Dep.target = this;
        const value = this.vm.data[this.exp];
        Dep.target = null;
        return value;
    }
    
    update() {
        const newValue = this.vm.data[this.exp];
        const oldValue = this.value;
        if (newValue !== oldValue) {
            this.value = newValue;
            this.cb.call(this.vm, newValue, oldValue);
        }
    }
}

// Vue 3响应式系统实现
class Vue3Reactive {
    constructor(data) {
        this.data = data;
        this.effectStack = [];
        this.targetMap = new WeakMap();
        this.proxy = this.createReactive(data);
    }
    
    createReactive(target) {
        return new Proxy(target, {
            get(target, key, receiver) {
                const res = Reflect.get(target, key, receiver);
                
                // 收集依赖
                track(target, key);
                
                // 如果是对象，递归创建响应式
                if (typeof res === 'object' && res !== null) {
                    return this.createReactive(res);
                }
                
                return res;
            },
            
            set(target, key, value, receiver) {
                const oldValue = target[key];
                const result = Reflect.set(target, key, value, receiver);
                
                // 触发更新
                if (oldValue !== value) {
                    trigger(target, key);
                }
                
                return result;
            }
        });
    }
}

// 依赖收集
function track(target, key) {
    if (activeEffect) {
        let depsMap = targetMap.get(target);
        if (!depsMap) {
            targetMap.set(target, (depsMap = new Map()));
        }
        
        let dep = depsMap.get(key);
        if (!dep) {
            depsMap.set(key, (dep = new Set()));
        }
        
        dep.add(activeEffect);
    }
}

// 触发更新
function trigger(target, key) {
    const depsMap = targetMap.get(target);
    if (!depsMap) return;
    
    const dep = depsMap.get(key);
    if (dep) {
        dep.forEach(effect => effect());
    }
}

// Effect函数
let activeEffect = null;
function effect(fn) {
    activeEffect = fn;
    fn();
    activeEffect = null;
}

// v-model指令实现
class VModelDirective {
    constructor(el, vm, expression) {
        this.el = el;
        this.vm = vm;
        this.expression = expression;
        this.init();
    }
    
    init() {
        // 根据元素类型选择不同的处理方式
        if (this.el.tagName === 'INPUT') {
            this.handleInput();
        } else if (this.el.tagName === 'SELECT') {
            this.handleSelect();
        } else if (this.el.tagName === 'TEXTAREA') {
            this.handleTextarea();
        }
    }
    
    handleInput() {
        const inputType = this.el.type;
        
        if (inputType === 'text' || inputType === 'password') {
            this.handleTextInput();
        } else if (inputType === 'checkbox') {
            this.handleCheckbox();
        } else if (inputType === 'radio') {
            this.handleRadio();
        }
    }
    
    handleTextInput() {
        // 监听input事件
        this.el.addEventListener('input', (e) => {
            this.vm[this.expression] = e.target.value;
        });
        
        // 监听数据变化
        new Watcher(this.vm, this.expression, (newValue) => {
            this.el.value = newValue;
        });
    }
    
    handleCheckbox() {
        this.el.addEventListener('change', (e) => {
            const checked = e.target.checked;
            const value = e.target.value;
            
            if (Array.isArray(this.vm[this.expression])) {
                // 多选框处理
                const array = this.vm[this.expression];
                if (checked) {
                    if (!array.includes(value)) {
                        array.push(value);
                    }
                } else {
                    const index = array.indexOf(value);
                    if (index > -1) {
                        array.splice(index, 1);
                    }
                }
            } else {
                // 单选框处理
                this.vm[this.expression] = checked;
            }
        });
        
        // 监听数据变化
        new Watcher(this.vm, this.expression, (newValue) => {
            if (Array.isArray(newValue)) {
                this.el.checked = newValue.includes(this.el.value);
            } else {
                this.el.checked = newValue;
            }
        });
    }
}

// 自定义双向绑定组件
Vue.component('custom-input', {
    props: ['value'],
    template: `
        <div class="custom-input">
            <input 
                :value="value" 
                @input="updateValue"
                @blur="onBlur"
                @focus="onFocus"
            />
            <span class="input-label">{{ label }}</span>
        </div>
    `,
    data() {
        return {
            label: '自定义输入框',
            isFocused: false
        };
    },
    methods: {
        updateValue(event) {
            // 向父组件发送更新事件
            this.$emit('input', event.target.value);
        },
        onBlur() {
            this.isFocused = false;
            this.$emit('blur');
        },
        onFocus() {
            this.isFocused = true;
            this.$emit('focus');
        }
    }
});

// 使用自定义组件
new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
        userInput: ''
    },
    template: `
        <div>
            <custom-input v-model="userInput"></custom-input>
            <p>输入的内容: {{ userInput }}</p>
        </div>
    `
});

// Vue 3 Composition API响应式实践
import { ref, reactive, computed, watch, watchEffect } from 'vue';

export default {
    setup() {
        // ref：基本类型响应式
        const count = ref(0);
        const message = ref('Hello Vue 3!');
        
        // reactive：对象类型响应式
        const user = reactive({
            name: '张三',
            age: 25,
            email: 'zhangsan@example.com'
        });
        
        // computed：计算属性
        const doubleCount = computed(() => count.value * 2);
        const userInfo = computed(() => {
            return `${user.name} (${user.age}岁) - ${user.email}`;
        });
        
        // watch：监听数据变化
        watch(count, (newValue, oldValue) => {
            console.log(`count从${oldValue}变为${newValue}`);
        });
        
        // watchEffect：自动收集依赖
        watchEffect(() => {
            console.log(`当前count值: ${count.value}`);
        });
        
        // 方法
        const increment = () => {
            count.value++;
        };
        
        const updateUser = (newUser) => {
            Object.assign(user, newUser);
        };
        
        return {
            count,
            message,
            user,
            doubleCount,
            userInfo,
            increment,
            updateUser
        };
    }
};

// 自定义组合式函数
import { ref, computed, watch } from 'vue';

// 计数器组合式函数
export function useCounter(initialValue = 0) {
    const count = ref(initialValue);
    
    const increment = () => count.value++;
    const decrement = () => count.value--;
    const reset = () => count.value = initialValue;
    
    const doubleCount = computed(() => count.value * 2);
    const isEven = computed(() => count.value % 2 === 0);
    
    return {
        count,
        increment,
        decrement,
        reset,
        doubleCount,
        isEven
    };
}

// 表单验证组合式函数
export function useFormValidation() {
    const errors = ref({});
    const isValid = computed(() => Object.keys(errors.value).length === 0);
    
    const validate = (rules, data) => {
        errors.value = {};
        
        Object.keys(rules).forEach(field => {
            const rule = rules[field];
            const value = data[field];
            
            if (rule.required && (!value || value.trim() === '')) {
                errors.value[field] = `${rule.label}是必填项`;
                return;
            }
            
            if (rule.minLength && value.length < rule.minLength) {
                errors.value[field] = `${rule.label}最少${rule.minLength}个字符`;
                return;
            }
            
            if (rule.pattern && !rule.pattern.test(value)) {
                errors.value[field] = `${rule.label}格式不正确`;
                return;
            }
        });
    };
    
    const clearErrors = () => {
        errors.value = {};
    };
    
    return {
        errors,
        isValid,
        validate,
        clearErrors
        };
}

// 使用组合式函数
export default {
    setup() {
        const { count, increment, decrement, doubleCount } = useCounter(10);
        
        const formData = reactive({
            name: '',
            email: '',
            password: ''
        });
        
        const { errors, isValid, validate, clearErrors } = useFormValidation();
        
        const rules = {
            name: { required: true, label: '姓名', minLength: 2 },
            email: { 
                required: true, 
                label: '邮箱', 
                pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/ 
            },
            password: { 
                required: true, 
                label: '密码', 
                minLength: 6 
            }
        };
        
        const submitForm = () => {
            validate(rules, formData);
            if (isValid.value) {
                console.log('表单提交成功:', formData);
            }
        };
        
        return {
            count,
            increment,
            decrement,
            doubleCount,
            formData,
            errors,
            isValid,
            submitForm,
            clearErrors
        };
    }
};

// 动态表单生成器
export default {
    data() {
        return {
            formConfig: [
                {
                    type: 'text',
                    name: 'username',
                    label: '用户名',
                    required: true,
                    placeholder: '请输入用户名'
                },
                {
                    type: 'email',
                    name: 'email',
                    label: '邮箱',
                    required: true,
                    placeholder: '请输入邮箱'
                },
                {
                    type: 'password',
                    name: 'password',
                    label: '密码',
                    required: true,
                    placeholder: '请输入密码'
                },
                {
                    type: 'select',
                    name: 'role',
                    label: '角色',
                    options: [
                        { value: 'admin', label: '管理员' },
                        { value: 'user', label: '普通用户' }
                    ]
                },
                {
                    type: 'checkbox',
                    name: 'interests',
                    label: '兴趣爱好',
                    options: [
                        { value: 'reading', label: '阅读' },
                        { value: 'music', label: '音乐' },
                        { value: 'sports', label: '运动' }
                    ]
                }
            ],
            formData: {},
            formErrors: {}
        };
    },
    
    methods: {
        updateFormData(field, value) {
            this.$set(this.formData, field, value);
            this.validateField(field);
        },
        
        validateField(field) {
            const config = this.formConfig.find(item => item.name === field);
            const value = this.formData[field];
            
            if (config && config.required && (!value || value.length === 0)) {
                this.$set(this.formErrors, field, `${config.label}是必填项`);
            } else {
                this.$delete(this.formErrors, field);
            }
        },
        
        submitForm() {
            // 验证所有字段
            this.formConfig.forEach(config => {
                this.validateField(config.name);
            });
            
            if (Object.keys(this.formErrors).length === 0) {
                console.log('表单提交:', this.formData);
            }
        }
    },
    
    template: `
        <div class="dynamic-form">
            <h2>动态表单</h2>
            <form @submit.prevent="submitForm">
                <div v-for="config in formConfig" :key="config.name" class="form-group">
                    <label>{{ config.label }}</label>
                    
                    <!-- 文本输入框 -->
                    <input 
                        v-if="config.type === 'text' || config.type === 'email' || config.type === 'password'"
                        :type="config.type"
                        :name="config.name"
                        :placeholder="config.placeholder"
                        :value="formData[config.name]"
                        @input="updateFormData(config.name, $event.target.value)"
                        :class="{ error: formErrors[config.name] }"
                    />
                    
                    <!-- 下拉选择框 -->
                    <select 
                        v-else-if="config.type === 'select'"
                        :name="config.name"
                        :value="formData[config.name]"
                        @change="updateFormData(config.name, $event.target.value)"
                        :class="{ error: formErrors[config.name] }"
                    >
                        <option value="">请选择</option>
                        <option 
                            v-for="option in config.options" 
                            :key="option.value"
                            :value="option.value"
                        >
                            {{ option.label }}
                        </option>
                    </select>
                    
                    <!-- 复选框 -->
                    <div v-else-if="config.type === 'checkbox'" class="checkbox-group">
                        <label 
                            v-for="option in config.options" 
                            :key="option.value"
                            class="checkbox-item"
                        >
                            <input 
                                type="checkbox"
                                :value="option.value"
                                :checked="formData[config.name] && formData[config.name].includes(option.value)"
                                @change="updateCheckbox(config.name, option.value, $event.target.checked)"
                            />
                            {{ option.label }}
                        </label>
                    </div>
                    
                    <div v-if="formErrors[config.name]" class="error-message">
                        {{ formErrors[config.name] }}
                    </div>
                </div>
                
                <button type="submit" :disabled="Object.keys(formErrors).length > 0">
                    提交
                </button>
            </form>
        </div>
    `,
    
    methods: {
        // ... 其他方法
        
        updateCheckbox(field, value, checked) {
            if (!this.formData[field]) {
                this.$set(this.formData, field, []);
            }
            
            const array = this.formData[field];
            if (checked) {
                if (!array.includes(value)) {
                    array.push(value);
                }
            } else {
                const index = array.indexOf(value);
                if (index > -1) {
                    array.splice(index, 1);
                }
            }
            
            this.validateField(field);
        }
    }
};

// 实时搜索组件
export default {
    data() {
        return {
            searchQuery: '',
            searchResults: [],
            isLoading: false,
            searchHistory: [],
            suggestions: []
        };
    },
    
    watch: {
        searchQuery: {
            handler(newQuery) {
                if (newQuery.length > 2) {
                    this.debouncedSearch(newQuery);
                } else {
                    this.searchResults = [];
                    this.suggestions = [];
                }
            },
            immediate: true
        }
    },
    
    methods: {
        debouncedSearch: debounce(function(query) {
            this.performSearch(query);
        }, 300),
        
        async performSearch(query) {
            this.isLoading = true;
            
            try {
                // 模拟API调用
                const results = await this.searchAPI(query);
                this.searchResults = results;
                
                // 更新搜索建议
                this.updateSuggestions(query);
                
                // 添加到搜索历史
                this.addToHistory(query);
                
            } catch (error) {
                console.error('搜索失败:', error);
            } finally {
                this.isLoading = false;
            }
        },
        
        updateSuggestions(query) {
            // 基于搜索历史生成建议
            this.suggestions = this.searchHistory
                .filter(item => item.toLowerCase().includes(query.toLowerCase()))
                .slice(0, 5);
        },
        
        addToHistory(query) {
            if (!this.searchHistory.includes(query)) {
                this.searchHistory.unshift(query);
                this.searchHistory = this.searchHistory.slice(0, 10);
            }
        },
        
        selectSuggestion(suggestion) {
            this.searchQuery = suggestion;
            this.suggestions = [];
        },
        
        clearSearch() {
            this.searchQuery = '';
            this.searchResults = [];
            this.suggestions = [];
        }
    },
    
    template: `
        <div class="search-component">
            <div class="search-input-container">
                <input 
                    v-model="searchQuery"
                    type="text"
                    placeholder="搜索..."
                    class="search-input"
                    @focus="showSuggestions = true"
                    @blur="hideSuggestions"
                />
                
                <div v-if="isLoading" class="loading-spinner"></div>
                
                <button 
                    v-if="searchQuery" 
                    @click="clearSearch"
                    class="clear-button"
                >
                    ×
                </button>
            </div>
            
            <!-- 搜索建议 -->
            <div v-if="suggestions.length > 0" class="suggestions">
                <div 
                    v-for="suggestion in suggestions" 
                    :key="suggestion"
                    @click="selectSuggestion(suggestion)"
                    class="suggestion-item"
                >
                    {{ suggestion }}
                </div>
            </div>
            
            <!-- 搜索结果 -->
            <div v-if="searchResults.length > 0" class="search-results">
                <div 
                    v-for="result in searchResults" 
                    :key="result.id"
                    class="result-item"
                >
                    <h3>{{ result.title }}</h3>
                    <p>{{ result.description }}</p>
                </div>
            </div>
        </div>
    `
};

// 防抖函数
function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

// 响应式数据优化
export default {
    data() {
        return {
            // 避免在data中定义大型对象
            largeData: null,
            
            // 使用计算属性替代复杂的数据绑定
            computedData: null
        };
    },
    
    computed: {
        // 使用计算属性缓存复杂计算
        expensiveComputation() {
            if (!this.largeData) return null;
            
            return this.largeData.map(item => ({
                ...item,
                processed: this.processItem(item)
            }));
        },
        
        // 使用计算属性进行数据过滤
        filteredData() {
            if (!this.largeData) return [];
            
            return this.largeData.filter(item => 
                item.status === 'active' && 
                item.score > 80
            );
        }
    },
    
    methods: {
        // 延迟加载大型数据
        async loadLargeData() {
            try {
                const data = await this.fetchLargeData();
                this.largeData = data;
            } catch (error) {
                console.error('加载数据失败:', error);
            }
        },
        
        // 使用Object.freeze冻结不需要响应式的数据
        freezeStaticData() {
            const staticData = {
                config: { theme: 'dark', language: 'zh' },
                constants: { MAX_SIZE: 1000, TIMEOUT: 5000 }
            };
            
            this.staticData = Object.freeze(staticData);
        },
        
        // 使用shallowReactive处理大型对象
        optimizeLargeObject() {
            const largeObject = this.createLargeObject();
            
            // Vue 3中使用shallowReactive
            this.optimizedData = shallowReactive(largeObject);
        }
    },
    
    created() {
        this.loadLargeData();
        this.freezeStaticData();
    }
};

// 事件处理优化
export default {
    data() {
        return {
            items: [],
            selectedItems: new Set()
        };
    },
    
    methods: {
        // 使用事件委托优化大量事件监听
        setupEventDelegation() {
            this.$refs.container.addEventListener('click', (e) => {
                if (e.target.classList.contains('item')) {
                    this.handleItemClick(e.target);
                }
            });
        },
        
        // 使用防抖优化频繁触发的事件
        handleInputChange: debounce(function(value) {
            this.updateSearchResults(value);
        }, 300),
        
        // 使用节流优化滚动事件
        handleScroll: throttle(function() {
            this.updateScrollPosition();
        }, 100),
        
        // 批量更新DOM
        batchUpdateItems(newItems) {
            this.$nextTick(() => {
                this.items = newItems;
            });
        },
        
        // 使用虚拟滚动处理大量数据
        renderVirtualList() {
            const visibleItems = this.items.slice(
                this.startIndex, 
                this.startIndex + this.visibleCount
            );
            
            return visibleItems.map(item => ({
                ...item,
                index: this.startIndex + visibleItems.indexOf(item)
            }));
        }
    },
    
    mounted() {
        this.setupEventDelegation();
    }
};

// 节流函数
function throttle(func, limit) {
    let inThrottle;
    return function() {
        const args = arguments;
        const context = this;
        if (!inThrottle) {
            func.apply(context, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}