主要介绍了Vue响应式原理-理解Observer、Dep、Watcher,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

导语： 本文是对 Vue 官方文档深入响应式原理（https://cn.vuejs.org/v2/guide/reactivity.html）的理解，并通过源码还原实现过程。 响应式原理可分为两步，依赖收集的过程与触发-重新渲染的过程。依赖收集的过程，有三个很重要的类，分别是 Watcher、Dep、Observer。本文主要解读 Observer 。 这篇文章讲解上篇文章没有覆盖到的 Observer 部分的内容，还是先看官网这张图： Observer 最主要的作用就是实现了上图中touch

回忆 在上一篇Vue响应式原理-理解Observer、Dep、Watcher简单讲解了Observer、Dep、Watcher三者的关系。 在Observer的伪代码中我们模拟了如下代码: class Observer { constructor() { // 响应式绑定数据通过方法 observe(this.data); } } export function observe (data) { const keys = Object.keys(data); for (l

开篇 最近在学习Vue的源码，看了网上一些大神的博客，看起来感觉还是蛮吃力的。自己记录一下学习的理解，希望能够达到简单易懂，不看源码也能理解的效果:grinning_squinting_face: Object.defineProperty 相信很多同学或多或少都了解Vue的响应式原理是通过Object.defineProperty实现的。被Object.defineProperty绑定过的对象，会变成「响应式」化。也就是改变这个对象的时候会触发get和set事件。进而触发一些视图更新。举个