Vue的响应式原则与双向数据绑定是如何实现和工作的？

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

目录 + 反应性原则 + 双向数据绑定 + v-model实践 + 反应性原则 + 它是 + Vue.js 的核心特性之一，一个数据驱动的视图，我们修改数据视图自动更新，非常优雅。+ Vue2.x 使用 + Object.defineProperty() + 实现响应式。

目录

• 反应性原则
• 双向数据绑定
• v-model实践

反应性原则

它是 Vue.js 的核心特性之一，一个数据驱动的视图，我们修改数据视图来响应更新，非常优雅。

Vue2.x 使用 Object.defineProperty() 实现，而 Vue3.x 使用 Proxy 实现。 我们先来看看2.x的实现。

Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function getter () { return obj[key]; }, set: function setter (newVal) { ... } })

我们通过Object.defineProperty给对象obj添加属性，可以设置对象属性的getter和setter函数。

之后，我们每通过点语法获取一个属性，就会执行这里的getter函数。 在这个函数中，我们会将调用这个属性的依赖收集到一个集合中； 当我们给属性赋值时，这个定义就会被触发。 setter函数，在辅助函数中，会通知集合中的依赖更新，让数据变化驱动视图变化。