Vue3实现v-model原理详解，如何改写为长尾词？

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

Vue 3 源码正式发布，各大厂商纷纷开始学习掌握。学习 Vue 3 的知识，尤其是其双绑定的变化，对于开发者来说至关重要。Vue 3 不再支持 v-model，而是使用 .sync 来实现双向绑定。以下是关于 Vue 3 双向绑定的简要说明，帮助大家快速理解。

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 进行取赋值操作的时候就可以接可以截获到它的行为了，但是如果你以为就只有这么简单你就错了。