Vue2和Vue3 的双向绑定原理
时间: 2023-06-24 21:09:29 浏览: 97
Vue2和Vue3的双向绑定原理都是基于Object.defineProperty()实现的。
在Vue2中,每一个Vue实例都会有一个watcher实例,当数据发生变化时,watcher会通知Dep(依赖收集器),Dep会通知所有订阅它的watcher实例,这些watcher实例会执行相应的更新操作,从而实现数据的响应式更新。而在实现双向绑定时,Vue2会在模板编译时,为每个需要实现双向绑定的指令(如v-model)创建一个包装器(wrapper)。这个包装器本质上就是一个对象,包含get和set两个方法。其中get方法负责读取数据,set方法负责更新数据。当用户输入时,触发input事件,input事件会调用set方法更新数据,从而实现双向绑定。
Vue3中采用了Proxy代理对象替换了Object.defineProperty()。当访问一个响应式对象的属性时,就会被Proxy拦截,从而实现对这个属性的依赖收集。当数据发生变化时,Proxy就会通知相应的变更,从而实现数据的响应式更新。在实现双向绑定时,Vue3中的v-model指令与Vue2中的v-model指令类似,也会创建一个代理对象,通过代理对象来实现双向绑定。不同的是,Vue3中的代理对象是动态生成的,而Vue2中的包装器是在模板编译时生成的。
阅读全文