Vue2与Vue3响应式系统深度对比解析
Vue2响应式实现机制
Vue2采用ES5中的Object.defineProperty方法实现数据响应式，通过该API对对象的getter和setter进行劫持，从而监听数据变化。
Vue2响应式的主要缺陷
- 属性监听限制：无法检测到对象属性的动态添加和删除操作
- 数组监听限制：无法监测数组元素的下标变化以及length属性的变更
Vue2的解决方案
针对上述问题，Vue2提供了专门的解决手段：
- 使用Vue.set方法动态添加响应式属性
- 使用Vue.delete方法删除对象属性
- 重写数组原型方法，实现对数组变更的监听
下面展示Object.defineProperty的基本使用方式：
<script>
// 数据劫持实现响应式
const userInfo = {
username: 'admin',
level: 3
}
for (const key in userInfo) {
let value = userInfo[key]
Object.defineProperty(userInfo, key, {
get() {
console.log(`捕获${key}的读取操作`)
return value
},
set(newValue) {
console.log(`捕获${key}的设置操作，新值：${newValue}`)
value = newValue
}
})
}
</script>实际项目中的使用示例：
<div id="app">
<h1>商品信息</h1>
<p>{{product.brand}} --- {{product.color}} --- {{product.discount}}</p>
<p>{{items}}</p>
</div>
<script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
product: {
brand: 'Apple',
color: 'silver'
},
items: ['item1', 'item2']
}
})
</script>Vue3响应式实现机制
Vue3引入ES6的Proxy和Reflect来实现响应式系统，能够拦截对象属性的各种操作，包括读写、添加、删除等共13种操作。
Vue3响应式的优势
- 支持检测代理对象属性的动态添加和删除
- 能够监测数组的下标和length属性的变更
- 无需使用额外的$set方法即可直接更新数据
Vue3响应式的不足
- ES6 Proxy在低版本浏览器不支持，IE11无法正常运行
- Vue3团队针对IE11提供了特殊兼容版本
Proxy基础用法演示：
<script>
const userData = {
username: 'admin',
age: 25
}
// 使用Proxy拦截对象操作
const reactiveData = new Proxy(userData, {
get(target, prop) {
console.log(`拦截${prop}的获取`)
return Reflect.get(target, prop)
},
set(target, prop, value) {
console.log(`拦截${prop}的设置，值：${value}`)
return Reflect.set(target, prop, value)
},
deleteProperty(target, key) {
console.log(`拦截属性删除：${key}`)
return Reflect.deleteProperty(target, key)
}
})
</script>Vue3项目中的实际应用：
<div id="app">
<h1>商品信息</h1>
<p>{{product.brand}} --- {{product.color}} --- {{product.discount}}</p>
<p>{{items}}</p>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const App = {
data() {
return {
product: {
brand: 'Samsung',
color: 'black'
},
items: ['product1', 'product2']
}
},
methods: {
updateBrand() {
this.product.brand = 'Huawei'
// DOM更新后执行回调
this.$nextTick(() => {
console.log(document.querySelector('p').innerHTML)
})
}
}
}
const vm = Vue.createApp(App).mount('#app')
</script>Proxy与Reflect配合使用
Reflect是ES6新增的反射对象，提供了操作对象的标准方法，与Proxy配合使用可以更优雅地实现响应式：
const proxyData = new Proxy(data, {
get(target, prop) {
return Reflect.get(target, prop)
},
set(target, prop, value) {
return Reflect.set(target, prop, value)
},
deleteProperty(target, prop) {
return Reflect.deleteProperty(target, prop)
}
})
proxyData.username = 'tom'完整的Proxy+Reflect示例：
<script>
const originalUser = {
name: "Alice",
age: 20
};
const reactiveUser = new Proxy(originalUser, {
get(target, prop) {
console.log('捕获get操作:', prop)
return Reflect.get(target, prop)
},
set(target, prop, val) {
console.log('捕获set操作:', prop, val)
return Reflect.set(target, prop, val)
},
deleteProperty(target, prop) {
console.log('捕获delete操作:', prop)
return Reflect.deleteProperty(target, prop)
}
});
console.log(reactiveUser.name, reactiveUser.age)
reactiveUser.name = 'Bob'
reactiveUser.age = 22
reactiveUser.gender = 'female'
delete reactiveUser.gender
</script>总结
Vue3的响应式系统基于Proxy实现，相比Vue2的Object.defineProperty具有更强的能力，能够自动检测属性的增删和数组的变化，无需像Vue2那样依赖额外的API手段。唯一的兼容性问题是IE11，但官方已提供对应的兼容版本解决方案。
