[vue面试题]4、key的作用

<template>
    <div>
        <div ref="container">
            <div v-for="item, index in dataList" :key="item.name">{{ item.name }}
                <div style="margin-left: 10px;">{{ item.child }}</div>
            </div>
        </div>
        <button @click="add">增加</button>
        <button @click="insert">插入</button>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';

const dataList = ref([{ name: 1, child: "1-1" }, { name: 2, child: "1-2" }]);
const add = () => {
    const num = Math.random() * 100;
    const child_num = `${num}_${Math.random() * 200}`;
    dataList.value.push({ name: num, child: child_num });
}

const insert = () => {
    const num = Math.random() * 100;
    const child_num = `${num}_${Math.random() * 200}`;
    dataList.value.splice(1, 0, { name: num, child: child_num });
}

const container = ref(null);

onMounted(() => {
    // 创建一个 MutationObserver 实例，并指定回调函数
    const observer = new MutationObserver((mutationRecords) => {
        for (const record of mutationRecords) {
            // 检查变动类型
            if (record.type === 'childList') {
                if (record.addedNodes.length > 0) {
                    for (const addedNode of record.addedNodes) {
                        console.log('新增的节点:', addedNode);
                    }
                }
                if (record.removedNodes.length > 0) {
                    for (const removedNode of record.removedNodes) {
                        console.log('移除的节点:', removedNode);
                    }
                }
            } else if (record.type === 'attributes') {
                console.log('属性变化:', record.target, '属性名称:', record.attributeName);
            } else if (record.type === 'characterData') {
                console.log('文本内容变化:', record.target);
            }
        }
    });

    // 开始观察指定的 DOM 节点及其子节点的变动
    observer.observe(container.value, {
        childList: true,      // 监听子节点的添加和删除
        attributes: true,     // 监听属性变化
        characterData: true,  // 监听文本内容变化
        subtree: true         // 监听整个子树
    });
});
</script>

<style lang="scss" scoped></style>