vue2 3响应式原理

最新推荐文章于 2024-06-15 12:30:52 发布

我承认都是月亮惹的祸

最新推荐文章于 2024-06-15 12:30:52 发布

阅读量949

点赞数

分类专栏：使用第三方库原生JavaScript 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_25733937/article/details/124893380

版权

本文探讨了Vue2和Vue3中响应式原理，如何实现数据变化时自动更新视图。核心是通过创建代理对象来追踪依赖，并在数据变化时精确执行相关函数，以达到局部更新的效果。Vue2采用Object.defineProperty，而Vue3则利用了Proxy来增强响应式能力。

摘要由CSDN通过智能技术生成

vue响应式原理

假装响应式

const info = {
     
  name: "red",
  age: 18,
};

// 2.将代码用一个函数包裹，info有改变就执行这个函数
function fn() {
     
  // 1.这些代码引用了info，info的变化，这些代码需要重新执行。
  console.log(info.name);
  console.log(info.age);
}

info.name = "blue";
info.age = 20;
fn();

多个地方引用了info

// 2.将改变info对象后需要执行的函数用变量储存
const reactiveFns = [];

// 3.用一个函数往数组添加函数
function watchFn(fn) {
     
  reactiveFns.push(fn);
}

const info = {
     
  name: "red",
  age: 18,
};

watchFn(function fn() {
     
  console.log(info.name);
  console.log(info.age);
});
// 1.设有多个地方引用了info
watchFn(function fn2() {
     
  console.log(info.age * 2);
});

info.name = "blue";
info.age = 20;
// fn();
// fn2();
reactiveFns.forEach(fn => {
     
  fn();
});

许多属性都需要具有响应式

// 2.用类封装，类本身具有更强的封装性。
class Depend {
     
  constructor() {
     
    // 2.1所有需要响应的函数
    this.reactiveFns = [];
  }

  // 2.2添加函数
  addDepend(fn) {
     
    this.reactiveFns.push(fn);
  }

  // 2.3通知所有执行的函数 执行。
  notify() {
     
    this.reactiveFns.forEach(fn => {
     
      fn();
    });
  }
}
// 3.每个对象对应一个类。
const depend = new Depend();
const depend2 = new Depend();

const info = {
     
  name: "red",
  age: 18,
};

// 1.有多个对象需要具有响应式，那么一个reactiveFns是不够的，此时考虑优化数据结构。
const info2 = {
     
  name: "green",
  age: 8,
};

depend.addDepend(function fn() {
     
  console.log(info.name);
  console.log(info.age);
});
depend.addDepend(function fn2() {
     
  console.log(info.age * 2);
});

depend2