【VUE】源码分析 - 数据劫持的基本原理

原创

已于 2022-05-02 16:35:45 修改 · 3.7k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2022-04-23 17:46:27 首次发布

tips：本系列博客的代码部分(示例等除外)，均出自vue源码内容，版本为2.6.14。但是为了增加易读性，会对不相关内容做选择性省略。如果大家想了解完整的源码，建议自行从官方下载。https://github.com/vuejs/vuehttps://github.com/vuejs/vue

本系列博客 ( 不定期更新 )：

【VUE】源码分析 - computed计算属性的实现原理_依然范特西fantasy的博客-优快云博客

【VUE】源码分析 - watch侦听器的实现原理_依然范特西fantasy的博客-优快云博客

【VUE】源码分析 - 数据劫持的基本原理_依然范特西fantasy的博客-优快云博客

一，基本实现原理

1，核心原理：defineProperty 和 Array的实例方法劫持

defineProperty是JS的元编程手段之一。Object类型，可以通过defineProperty来实现对数据的劫持监听。

vue中的defineReactive函数正是做了这样一件事。其简化形式如下：

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get() {
      //收集依赖
      return val
    },
    set(newValue) {
      //触发依赖
      val = newValue
    },
  });
}

通过对obj的defineProperty，在其get和set函数中做了某些操作，其中就包括了依赖的收集，和对依赖的触发。get和set函数对defineReactive函数闭包中val的操作，从而实现私有变量的对外隐蔽。

而对于数组类型的数据劫持，vue给出的方案是对其某些实例方法的进行劫持。

const methodsToPatch = [
  "push",
  "pop",
  "shift",
  "unshift",
  "splice",
  "sort",
  "reverse",
];

methodsToPatch.forEach(function (method) {
  const original = Array.property[method];
  def(arrayMethods, method, function mutator(...args) {
    //拦截Array的几个原型方