vue面试

vue的响应式原理是什么？请详细说明Object.defineProperty()和Proxy的区别和用法。
响应式原理：Vue中采用了数据劫持的方式，通过Object.defineProperty()函数来监听数据变化，并在数据变化时触发对应的更新函数。 Object.defineProperty()与Proxy的区别：前者只能监听属性的读取和修改，后者可以监听数组的变化等更多场景，且性能更高。
// 实现observe函数，对data对象中的所有属性进行数据劫持
function observe(data) {
if (!data || typeof data !== 'object') {
return
}
Object.keys(data).forEach(key => {
defineReactive(data, key, data[key])
})
}

// 定义defineReactive函数，通过Object.defineProperty()函数来监听数据变化
function defineReactive(obj, key, val) {
observe(val)
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter() {
console.log('get value:', val)
return val