前端必读Vue响应式系统大PK（上）

　　响应式系统（Reactivitysystems）是现代前端框架的关键部分之一。应用系统的的高度交互性、动态性和响应能力全靠它支持。每个Web开发人员而言都应该了解这一系统的功能和实践操作。
　　原理
　　响应系统是一种使自动使数据源（模型）与数据表示（视图）层自动保持同步的机制。每次模型更改时，都会重新渲染视图。
　　以一个简单的Markdown编辑器为例。通常编辑器有两个窗格：一个窗格用于编写Markdown代码（用于修改基础模型），另一个窗格用于预览已编译的HTML（显示已更新的视图）。当我们在书写窗格中写东西时，它会立即在预览窗格中自动预览。这个例子比较简单，在实际情况中会复杂很多。
　　在许多情况下，我们要显示的数据取决于其他数据。在这种情况下，需要跟踪相关数据，并根据跟踪情况来更新数据。例如，我们有一个fullName，该属性由firstName和lastName属性组成。修改其任何依赖项后，fullName将自动重新评估，并在视图中显示结果。
　　了解什么是响应式系统后，在了解Vue3中的响应系统如何工作以及如何在实践中使用之前，让我们一起来快速回顾一下Vue2中的响应系统内容及其注意事项。Vue2的响应式系统简介
　　Vue2中的响应或多或少会被隐藏。无论我们放置在data对象中的是什么，Vue都会使其隐式反应（reactiveimplicitly）。这样虽然可以使开发人员的工作更加轻松，但灵活度却会不可避免的降低。
　　在幕后，Vue2使用ES5Object。defineProperty将data对象的所有属性转换为getter和setter。对于每个组件实例，Vue创建一个依赖关系观察程序实例，观察者会记录组件渲染期间依赖收集跟踪的任何属性。当属性触发依赖项的设置器时，将通知观察者，并将组件重新渲染并更新视图。但是却也会有一些问题存在。变更检测警告
　　由于Object。defineProperty方法的限制，Vue无法检测到某些数据更改。包括：给对象添加属性或把对象移除属性（例如obj。newKeyvalue）按索引设置数组项（例如arr〔index〕newValue）修改数组的长度（例如arr。lengthnewLength）
　　不过为了解决这些问题，Vue为提供了Vue。setAPI方法，该方法向响应对象添加了一个属性，确保新属性也是响应性的，从而触发了视图更新。
　　用下述实例讨论该情况：
　　pidapp
　　h1Hello！Mynameis｛｛person。name｝｝。Im｛｛person。age｝｝yearsold。spanh1
　　buttonclickaddAgePropertyAddagepropertyspanbutton
　　pHerearemyfavoriteactivities：spanp
　　ul
　　livforitem，indexinactivities：keyindex
　　｛｛item｝｝
　　buttonclickeditActivity（index）Editspanbutton
　　spanli
　　spanul
　　buttonclickclearActivitiesCleartheactivitieslistspanbutton
　　spanp
　　constAppnewVue（｛
　　el：app，
　　data：｛
　　person：｛
　　name：David
　　｝，
　　activities：〔
　　Readingbooks，
　　Listeningmusic，
　　WatchingTV
　　〕
　　｝，
　　methods：｛
　　1。Addanewpropertytoanobject
　　addAgeProperty（）｛
　　this。person。age30
　　｝，
　　2。Settinganarrayitembyindex
　　editActivity（index）｛
　　constnewValueprompt（Inputanewvalue）
　　if（newValue）｛
　　this。activities〔index〕newValue
　　｝
　　｝，
　　3。Modifyingthelengthofthearray
　　clearActivities（）｛
　　this。activities。length0
　　｝
　　｝
　　｝）；
　　在上面的示例中，我们会发现这三种方法都不起作用。我们不能向该person对象添加新属性，无法使用activities的索引来编辑数组中的项目，也不能修改activities数组的长度。
　　优化如下：
　　constAppnewVue（｛
　　el：app，
　　data：｛
　　person：｛
　　name：David
　　｝，
　　activities：〔
　　Readingbooks，
　　Listeningmusic，
　　WatchingTV
　　〕
　　｝，
　　methods：｛
　　1。Addinganewpropertytotheobject
　　addAgeProperty（）｛
　　Vue。set（this。person，age，30）
　　｝，
　　2。Settinganarrayitembyindex
　　editActivity（index）｛
　　constnewValueprompt（Inputanewvalue）
　　if（newValue）｛
　　Vue。set（this。activities，index，newValue）
　　｝
　　｝，
　　3。Modifyingthelengthofthearray
　　clearActivities（）｛
　　this。activities。splice（0）
　　｝
　　｝
　　｝）；
　　在此示例中，我们用Vue。setAPI方法将新age属性添加到person对象，并从活动数组中选择修改特定项目。在最后一种情况下，使用JavaScript内置splice方法。
　　这个做法完全可行但却略显笨拙，而且会导致前后代码不一致。而Vue3就解决了这个问题。
　　我们用下面示例继续看：
　　constApp｛
　　data（）｛
　　return｛
　　person：｛
　　name：David
　　｝，
　　activities：〔
　　Readingbooks，
　　Listeningmusic，
　　WatchingTV
　　〕
　　｝
　　｝，
　　methods：｛
　　1。Addinganewpropertytotheobject
　　addAgeProperty（）｛
　　this。person。age30
　　｝，
　　2。Settinganarrayitembyindex
　　editActivity（index）｛
　　constnewValueprompt（Inputanewvalue）
　　if（newValue）｛
　　this。activities〔index〕newValue
　　｝
　　｝，
　　3。Modifyingthelengthofthearray
　　clearActivities（）｛
　　this。activities。length0
　　｝
　　｝
　　｝
　　Vue。createApp（App）。mount（app）
　　可以看到在Vue3中，所有方法都可以正常工作。
　　在Vue2。6中，引入的Vue。observableAPI方法，一定程度的公开了响应式系统，使开发人员可以体验到响应式系统的内容。实际上，这和Vue内部用来包装data对象是完全相同的方法，对于在简单场景创建小的跨组件状态存储很有用。但依旧没办法和Vue3的响应式系统相比，接下来就为大家详细介绍。
　　注意：由于Object。defineProperty方法是仅限ES5且不可调整的功能，因此Vue2不支持IE8及以下版本。Vue3响应式系统如何工作
　　为了充分利用ES6ProxyandReflectAPI，Vue3中的响应式系统已被完全重写。新版本新增响应式API，该API使系统比以前更加灵活和强大。
　　ProxyAPI允许开发人员拦截和修改目标对象上的更低级对象操作。代理（proxy）是对象的克隆包装（clonewrapper），并提供特殊功能（称为target），这些功能响应特定的操作并覆盖JavaScript对象的内置行为（称为traps）。如果仍然需要使用默认行为，则可以使用相应的ReflectionAPI，其名称顾名思义就是反映ProxyAPI的方法。这里有一个示例，用来了解如何在Vue3中使用这些API：
　　letperson｛
　　name：David，
　　age：27
　　｝；
　　consthandler｛
　　get（target，property，receiver）｛
　　track（target，property）
　　console。log（property）output：name
　　returnReflect。get（target，property，receiver）
　　｝，
　　set（target，property，value，receiver）｛
　　trigger（target，property）
　　console。log（｛property｝：｛value｝）output：age：30andhobby：Programming
　　returnReflect。set（target，property，value，receiver）
　　｝
　　｝
　　letproxynewProxy（person，handler）；
　　console。log（person）
　　get（readingapropertyvalue）
　　console。log（proxy。name）output：David
　　set（writingtoaproperty）
　　proxy。age30；
　　set（creatinganewproperty）
　　proxy。hobbyProgramming；
　　console。log（person）
　　要创建一个新的代理，使用newProxy（target，handler）构造函数。它带有两个参数：目标对象（person对象）和处理程序对象，该对象定义将拦截哪些操作（get和set操作）。在handler对象中，get和set陷阱来跟踪何时读取属性以及何时修改添加属性。设置控制台语句以确保运行正确。
　　在get和set陷阱采用下列参数：target：代理包装的目标对象property：属性名称value：属性值（此参数仅用于设置操作）receiver：进行操作的对象（通常是代理）
　　ReflectAPI方法与其相应的代理方法接受相同的参数
　　注释中track函数和trigger函数特定用于Vue，用于跟踪何时读取属性以及何时修改添加属性。
　　在示例的最后一部分，用控制台语句输出原始person对象。然后用另一份声明中读取属性name的proxy对象。接下来，修改age属性并创建一个新hobby属性。最后，再次输出该对象以查看它是否正确更新。
　　以上就是Vue3响应式系统的完整工作流程，但在实际工作中会复杂得多。
　　使用Vue3响应式系统，还有一些注意事项：仅适用于支持ES6的浏览器响应代理不等于原始对象总结
　　以上我们将Vue2和Vue3中响应式系统部分进行了比较，并对响应式系统的工作原理进行了说明，在后面的文章中，我们会进一步为大家介绍Vue3中响应式系统的API，敬请期待。
　　更多技术相关内容，也欢迎点击下方了解更多访问葡萄城技术博客。