vue3双向绑定原理

Vue3使用Proxy实现双向绑定的原因是因为Object.defineProperty存在一些缺点。首先，Object.defineProperty无法监听对象属性的删除和添加，也不能监听数组的变化，除了一些特定的数组方法。其次，Object.defineProperty只能遍历对象属性直接修改，无法对属性进行深层次的修改。而Proxy具有以下优点：1）直接监听对象而非属性；2）直接监听数组的变化；3）拦截的方式有多种，可以对set、get、has等操作进行拦截；4）Proxy返回一个新对象，可以对新对象进行操作来达到目的。然而，Proxy的缺点是对IE不友好，因此当检测到使用IE时，Vue3会自动降级为使用Object.defineProperty来实现双向绑定。\[1\]\[2\]

在Vue中，当你把一个普通的JavaScript对象传入Vue实例的data选项时，Vue会遍历此对象的所有属性，并使用Object.defineProperty将这些属性转为getter/setter。这样，每个组件实例都会对应一个watcher实例，它会在组件渲染过程中将接触过的数据属性记录为依赖。当依赖项的setter触发时，watcher会被通知，从而使关联的组件重新渲染。这就是Vue的双向绑定原理。\[3\]
#### 引用[.reference_title]
- *1* [vue3双向绑定实现原理](https://blog.csdn.net/weixin_44700978/article/details/118769759)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [vue的双向数据绑定原理](https://blog.csdn.net/Mine____/article/details/104955845)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]