Vue3中v-model实现原理及vue3如何实现v-model？

本文共计1521个文字，预计阅读时间需要7分钟。

Vue 3 源码正式发布，各大厂纷纷开始抢占先机。学习 Vue 3 的知识迫在眉睫。Vue 3 不再支持 v-model，转而使用 .sync 来实现双向绑定。本文旨在帮助大家快速理解 Vue 的双向绑定机制。

vue3 源码正式放出来了，想必大家也都开始争先恐后的学习 vue3 的知识了。由于 vue3 已经不再支持 v-model 了，而使用 .sync 来代替，但是为了这篇文章可以帮助大家快速了解 vue 的双向绑定实现原理，部分使用了 vue2.x v-model 的实现原理

proxy 的基础知识，相信大家已经都很了解了，让我们一起来回顾一下吧

proxy 是对一个对象的代理，并返回一个已代理的对象，已代理的对象如果发生任何 set 跟 get 的方法都可以被捕获到，我们写一个简单的 :chestnut:

const target = { a: 1 } const handers = { get() { // 当对 observed.a 进行取值时会触发 }, set() { // 当对 observed.a 进行赋值时会触发 }, // 还有一些额外的参数如 has 等，这里用不到，就不多说了 .... } const observed = new Proxy(target, handers)

这样我们就可以对 target 对象设置了一层代理，当我们对 target 进行取赋值操作的时候就可以接可以截获到它的行为了，但是如果你以为就只有这么简单你就错了。