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;">
{
{