Vue的响应式实现思路及源码分析

最新推荐文章于 2024-07-25 07:30:00 发布

shxs875

最新推荐文章于 2024-07-25 07:30:00 发布

阅读量361

点赞数

分类专栏： Vue的响应式实现思路及源码分析文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_64974855/article/details/131597486

版权

本文深入探讨Vue框架的响应式实现思路，包括在初始化过程中对数据进行响应化处理，模板编译以构建视图，以及如何通过Observer、Compile、Watcher和Dep对象协同工作来确保数据变化时视图的自动更新。文章详细介绍了这几个关键组件的职责，并通过实例解释了数据监听、依赖收集和事件绑定等核心机制。

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

Vue

# 思路

new Vue() 首先执行初始化，对 data 执行响应化处理，这个过程发生在 Observer 中
同时对模板执行编译，找到其中动态绑定的数据，从 data 中获取并初始化视图，这个过程发生在 compile 中
同时定义一个更新函数和 Watcher，将来对应数据变化时 Watcher 会调用更新函数
由于 data 的某个 key 在视图中可以出现多次，所以每个 key 都需要一个管家 Dep 来管理多个 Watcher
将来 data 中的数据一旦发生变化，会首先找到对应的 Dep ，通知所有 Watcher 执行更新函数

职责划分

CVue：框架构造函数
Observer：执行数据响应化（分辨数据是对象还是数组）
Compile：编译模板，初始化视图，收集依赖（更新函数、watcher 创建）
Watcher：执行更新函数（更新 DOM ）
Dep：管理多个 Watcher，批量更新

# 实现

响应化处理及数据代理

// cvue.js
class CVue {
  constructor(options) {
    // 保存选项
    this.$options = options;
    this.$data = options.data;
    // 响应化处理
    observe(this.$data);

    // 代理
    Proxy(this, '$data')
  }
}
// 代理函数,提供对$data中数据的直接访问
function Proxy(vm, sourceKey) {
  Object.keys(vm[sourceKey]).forEach(key => {
    Object.defineProperty(vm, key, {
      get() {
        return vm[sourceKey][key];
      },
      set(newVal) {
        vm[sourceKey][key] = newVal;
      }
    })
  })
}
function defineReactive(obj, key, val) {
  // 递归
  observe(val);
  // 对传入obj进行访问拦截
  Object.defineProperty(obj, key, {
    get() {
      console.log('get ' + key);
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        console.log('set ' + key + ':' + newVal);
        // 如果传入的newVal依然是obj，需要做响应化处理
        observe(newVal);