vue3对比vue2的性能优化和提升 ：Vue 3 vs Vue 2
1.性能提升
1.1.响应式系统的改进：
从 Object.defineProperty 到 Proxy
Vue2:Vue 2 的响应式系统基于 Object.defineProperty，它为每个属性单独设置 getter 和 setter。虽然能够满足基本需求，但它在以下方面存在性能瓶颈：
- Vue2 中数组监听的局限性:Vue2 通过
Object.defineProperty实现响应式，这种方式无法监听数组索引的变化 - push()、pop()、shift()、unshift()、splice()、sort()、reverse(),这些是Vue2 对数组的 7 个方法进行了重写，使其能触发视图更新，另外，Vue 提供了
Vue.set(或this.$set) 方法专门用于修改数组索引，以下是语法解释+代码演示加深理解：
push()：在数组末尾添加元素
pop()：删除数组最后一个元素
shift()：删除数组第一个元素
unshift()：在数组开头添加元素
splice()：灵活地删除、添加或替换元素
sort()：对数组进行排序
reverse()：反转数组元素顺序
Code demonstration：（code可以保存在html文件直接运行查看演示效果）
<!DOCTYPE html>
<html>
<head><title>Vue2 数组更新方法全演示</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><style>body {font-family: Arial, sans-serif;padding: 20px;}.demo-container {max-width: 800px;margin: 0 auto;}.array-display {padding: 15px;background-color: #f0f7ff;border: 1px solid #bed6ff;border-radius: 4px;margin: 15px 0;}.button-group {margin: 10px 0;display: flex;flex-wrap: wrap;gap: 8px;}button {padding: 6px 12px;border: 1px solid #ccc;border-radius: 4px;cursor: pointer;background-color: #fff;}button:hover {background-color: #f5f5f5;}.special-method {background-color: #fff3cd;border-color: #ffeeba;}.non-reactive {background-color: #f8d7da;border-color: #f5c6cb;}.log-area {margin-top: 20px;padding: 10px;border: 1px solid #ddd;border-radius: 4px;height: 200px;overflow-y: auto;font-size: 14px;}</style>
</head>
<body><div class="demo-container" id="app"><h2>Vue2 数组更新方法演示</h2><div class="array-display"><strong>当前数组：</strong><span v-for="(item, index) in items" :key="index">{{ index }}: {{ item }}<span v-if="index !== items.length - 1">, </span></span></div><h3>1. Vue2 重写的7个数组方法（自动触发更新）</h3><div class="button-group"><button @click="handlePush">push('新元素')</button><button @click="handlePop">pop()</button><button @click="handleShift">shift()</button><button @click="handleUnshift">unshift('首元素')</button><button @click="handleSplice">splice(替换元素)</button><button @click="handleSort">sort()</button><button @click="handleReverse">reverse()</button></div><h3>2. 特殊更新方法（解决响应式限制）</h3><div class="button-group"><button class="special-method" @click="handleSet">this.$set(修改索引)</button><button class="special-method" @click="handleDestruct">解构赋值（强制更新）</button><button class="non-reactive" @click="handleDirectModify">直接修改索引（不生效）</button></div><div class="log-area"><strong>操作日志：</strong><div v-for="(log, i) in logs" :key="i" style="margin: 4px 0;">{{