在vue3中，get函数和set函数是很重要的概念。它们可以让你更灵活地管理你的数据，同时也是理解vue3响应式原理的关键之一。
get函数和set函数是ES6中的一个新特性，用于对一个对象属性进行拦截。当你去访问该属性时，get函数会被调用，当你去修改该属性时，set函数会被调用。
在Vue3中，可以利用这个特性来拦截一个对象的属性，从而实现响应式。Vue3中的响应式原理是通过使用ES6的Proxy来实现的，而Proxy就是利用了get函数和set函数来拦截对象属性的读取和修改。
举个例子，我们可以创建一个对象，并拦截该对象的一个属性：
let obj = {
name: 'Tom',
age: 18
}
let proxyObj = new Proxy(obj, {
get(target, key) {
console.log(`读取${key}属性`);
return target[key];
},
set(target, key, value) {
console.log(`修改${key}属性，新值为${value}`);
target[key] = value;
}
})
proxyObj.name; // 读取name属性，返回'Tom'
proxyObj.age = 20; // 修改age属性，新值为20以上代码中，我们创建了一个proxyObj对象，并拦截了该对象的get和set操作。当我们访问proxyObj的属性时，会调用get函数并输出‘读取属性名字’，然后返回该属性的值。当我们修改proxyObj的属性时，会调用set函数，输出‘修改属性名字，新值为属性值’，并将新的属性值赋给该属性。
立即学习“前端免费学习笔记（深入）”；
在Vue3中，利用这个特性，我们可以把每个组件的data数据都封装成一个Proxy对象，从而实现响应式。例如：
const data = {
name: 'Tom',
age: 18
}
const reactiveData = new Proxy(data, {
get(target, key) {
console.log(`读取${key}属性`);
return target[key];
},
set(target, key, value) {
console.log(`修改${key}属性，新值为${value}`);
target[key] = value;
}
})
export default {
data() {
return reactiveData;
},
methods: {
update() {
this.name = 'Jerry';
}
}
}以上代码中，我们把data数据封装成了一个Proxy对象，并在组件中返回该对象作为data。当我们去修改组件中的数据时，比如执行update方法，就会调用set函数进行拦截，从而实现响应式数据的更新。
同时，我们可以在Vue3中使用Ref和Reactive两个API来创建响应式对象。Ref对象可以把一个值封装成响应式对象，Reactive可以把一个普通对象变成响应式对象。这两个API底层也是通过利用get和set函数进行拦截来实现响应式。
总之，get和set函数是Vue3响应式原理中非常重要的概念。了解这个特性，可以更好地理解Vue3的响应式原理，也可以让你更灵活地管理数据。如果你想深入了解Vue3响应式原理，建议多研究学习get和set函数的使用，这将对你的工作和学习都有很大帮助。
