面试题：Vue侦听器与多层级嵌套数据双向绑定的深度实践

设计思路

使用Vue的响应式原理：Vue通过Object.defineProperty或Proxy（Vue 3.x）来实现数据的响应式。利用这一特性，我们可以对多层级嵌套的数据进行监听。
递归处理嵌套数据：为了处理动态增加或删除层级，我们需要递归遍历数据结构，对每一层的属性都设置响应式。
双向绑定：结合Vue的模板语法，利用v-model指令来实现双向绑定。v-model本质上是value属性和input事件的语法糖。

关键代码片段

递归设置响应式数据

function reactive(data) {
    if (typeof data === 'object' && data!== null) {
        for (let key in data) {
            if (data.hasOwnProperty(key)) {
                let value = data[key];
                Object.defineProperty(data, key, {
                    get() {
                        return value;
                    },
                    set(newValue) {
                        if (newValue!== value) {
                            value = newValue;
                            // 触发视图更新
                            console.log(`${key} has been updated to ${newValue}`);
                        }
                    }
                });
                // 递归处理子对象
                if (typeof value === 'object' && value!== null) {
                    reactive(value);
                }
            }
        }
    }
    return data;
}

在Vue组件中使用

<template>
    <div>
        <input v-model="nestedData.firstLevel.secondLevel.value" type="text">
        <p>{{ nestedData.firstLevel.secondLevel.value }}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            nestedData: reactive({
                firstLevel: {
                    secondLevel: {
                        value: 'initial value'
                    }
                }
            })
        };
    }
};
</script>

边界情况

数据类型检查：确保传入的data是对象类型，避免对非对象数据进行递归处理。
循环引用：在递归处理过程中，要注意避免循环引用，例如A对象引用B对象，B对象又引用A对象。可以通过一个WeakMap来记录已经处理过的对象，防止重复处理。

const visited = new WeakMap();
function reactive(data) {
    if (typeof data === 'object' && data!== null &&!visited.has(data)) {
        visited.set(data, true);
        for (let key in data) {
            if (data.hasOwnProperty(key)) {
                let value = data[key];
                Object.defineProperty(data, key, {
                    get() {
                        return value;
                    },
                    set(newValue) {
                        if (newValue!== value) {
                            value = newValue;
                            console.log(`${key} has been updated to ${newValue}`);
                        }
                    }
                });
                if (typeof value === 'object' && value!== null) {
                    reactive(value);
                }
            }
        }
    }
    return data;
}

动态增减层级：当动态增加层级时，需要再次调用reactive函数对新的层级进行响应式处理；当删除层级时，需要确保相关的响应式绑定被正确移除。在Vue中，删除对象属性可以使用Vue.delete（Vue 2.x）或delete操作符（Vue 3.x），并手动处理可能的视图更新。

// Vue 2.x
import Vue from 'vue';
// 删除属性
Vue.delete(this.nestedData.firstLevel,'secondLevel');
// Vue 3.x
delete this.nestedData.firstLevel.secondLevel;

星途面试题库

面试题：Vue侦听器与多层级嵌套数据双向绑定的深度实践

知识考点

面试题答案

设计思路

关键代码片段

边界情况