如何通过图解全面理解Vue框架的响应式机制原理？

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

前言：如果您自己去实现数据驱动的模式，如何解决以下几个问题：

1.通过什么手势去知道我的数据变了？

2.通过什么方式去同步更新视图？

3.数据持久化——obvserver，我们需要知道数据的获取和更新。

前言

如果自己去实现数据驱动的模式，如何解决一下几个问题：

• 通过什么手段去知道我的数据变了？
• 通过什么东西去同步更新视图？

数据劫持——obvserver

我们需要知道数据的获取和改变，数据劫持是最基础的手段。在Obeserver中，我们可以看到代码如下：

Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter () { // ... }, set: function reactiveSetter (newVal) { // ... } })

通过Object.defineProperty这个方法，我们可以在数据发生改变或者获取的时候，插入一些自定义操作。同理，vue也是在这个方法中做依赖收集和派发更新的。

绑定和更新视图——watcher

从初始化开始，我们渲染视图的时候，便会生成一个watcher，他是监视视图中参数变化以及更新视图的。