探秘Vue 2.x的内部运作机制——揭开响应式原理的神秘面纱

2024-01-02 23:14:49

在现代前端开发中，Vue.js脱颖而出，以其简单易学、功能强大的特点，赢得了广大开发者的青睐。作为一款优秀的框架，Vue.js的核心原理之一便是响应式。本文将深入剖析Vue 2.x的响应式系统，揭示其内部运作机制，帮助您更深入地理解Vue 2.x的工作原理。

响应式系统概览

Vue.js的响应式系统主要由三个部分组成：

Object.defineProperty()方法： 利用JavaScript的Object.defineProperty()方法，对数据对象的属性进行劫持，当属性值发生改变时触发相应的回调函数。
getter和setter： getter和setter方法是对属性进行访问和设置时调用的函数。通过重写getter和setter方法，可以对属性值的改变进行拦截和处理。
观察者模式： 观察者模式是一种设计模式，允许一个对象将状态变化通知给其他对象。在Vue.js中，观察者模式被用于当数据对象发生改变时，通知订阅该对象的组件重新渲染。

深入剖析响应式原理

Object.defineProperty()方法：

Object.defineProperty(obj, prop, {
  configurable: true,
  enumerable: true,
  get: function() {
    // 当属性被读取时触发
    return val;
  },
  set: function(newVal) {
    // 当属性被设置时触发
    val = newVal;
    // 通知订阅该对象的组件重新渲染
    dep.notify();
  }
});

在上述代码中，我们使用Object.defineProperty()方法对obj对象的prop属性进行劫持。当prop属性被读取或设置时，对应的getter或setter方法将被触发。在setter方法中，我们将新的属性值赋值给val，并调用dep.notify()方法通知订阅该对象的组件重新渲染。

getter和setter：

const obj = {
  name: 'John Doe',
  age: 25
};

Object.defineProperty(obj, 'fullName', {
  get: function() {
    return this.name + ' ' + this.age;
  }
});

console.log(obj.fullName); // "John Doe 25"

在上述代码中，我们使用getter方法计算了fullName属性的值。当我们访问obj.fullName时，getter方法将被触发，并返回"John Doe 25"。

观察者模式：

class Dep {
  constructor() {
    this.subs = [];
  }

  addSub(sub) {
    this.subs.push(sub);
  }

  notify() {
    this.subs.forEach(sub => sub.update());
  }
}

class Watcher {
  constructor(vm, expr, cb) {
    this.vm = vm;
    this.expr = expr;
    this.cb = cb;

    // 将自己添加到依赖项的订阅者列表中
    this.dep = new Dep();
    this.dep.addSub(this);
  }

  update() {
    // 调用回调函数更新视图
    this.cb.call(this.vm, this.get());
  }

  get() {
    // 计算表达式并返回结果
    return this.vm.$data[this.expr];
  }
}