Vue2.x源码解析（一）

汪汪队出击

已于 2023-05-16 16:42:14 修改

阅读量954

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2023-05-16 10:33:23 首次发布

本文链接：https://blog.csdn.net/qq_58671311/article/details/130700063

版权

vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

Vue.js 2.0 的基础

Vue.js 2.0 的基础可以概括为以下几点：

数据响应式。
组件化。
指令系统。

一个 Vue.js 应用程序由多个 Vue 实例组成，每个 Vue 实例都代表一个特定的区域内的视图，Vue 实例包含了一个数据模型和一个视图模板。Vue.js 的核心是数据响应式，也就是当我们改变数据时，视图会自动更新。

Vue.js 的源码结构

Vue.js 源码非常庞大，整个源码包括以下几个部分：

Observer：用于实现数据响应式的核心组件。
Watcher：用于处理视图中具体的更新操作。
Compiler：用于将组件模板编译成渲染函数。
Runtime：用于实现组件和指令等运行时的公共逻辑。
Platform：用户平台特定的逻辑。

Vue.js 源码解析

在整个 Vue.js 源码中，Observer 和 Watcher 是比较核心和重要的两个部分。

Observer

Observer 的主要作用是实现数据响应式机制，它通过递归的方式对数据对象进行劫持。当数据对象的某个属性发生变化时，会自动通知上层依赖进行更新。

Observer 的实现代码如下：

class Observer {
  constructor(value) {
    this.value = value
    this.dep = new Dep()

    // 如果该对象不可扩展，则直接返回。
    if (!Array.isArray(value)) {
      this.walk(value)
    }
  }

  /**
   * 循环遍历对象的每个属性，使得每个属性都成为响应式的。
   */
  walk(obj) {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i], obj[keys[i]])
    }
  }
}

/**
 * 对一个对象的属性进行劫持，即实现数据响应式机制。
 */
function defineReactive(obj, key, val) {
  const dep = new Dep()

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      if (Dep.target) {
        dep.depend()
      }
      return val
    },
    set: function reactiveSetter(newVal) {
      if (newVal === val) {
        return
      }
      val = newVal
      dep.notify()
    }
  })
}

2. Watcher

Watcher 的主要作用是收集依赖，并在数据变化时触发相应的更新操作。当一个组件初始化完毕时，会创建一个渲染 Watcher，它会在组件触发更新时执行渲染函数，并进行更新操作。

Watcher 的实现代码如下：

class Watcher {
  constructor(vm, expOrFn, callback) {
    this.vm = vm
    this.callback = callback
    this.depIds = {}

    if (typeof expOrFn === 'function') {
      this.getter = expOrFn
    } else {
      this.getter = parsePath(expOrFn)
    }

    // 在实例化 Watcher 对象时，将它自身赋值给 Dep.target，此时
    // Dep.target 维护了一个栈结构。
    Dep.target = this
    this.value = this.get()
    Dep.target = null
  }

  /**
   * 收集依赖。
   */
  addDep(dep) {
    if (!this.depIds.hasOwnProperty(dep.id)) {
      dep.addSub(this)
      this.depIds[dep.id] = dep
    }
  }

  /**
   * 计算表达式的值并返回。
   */
  get() {
    // 当计算表达式的值时，依赖会被自动收集。
    return this.getter.call(this.vm, this.vm)
  }

  /**
   * 当表达式的值发生变化时会被调用，调用一系列的回调函数进行更新操作。
   */
  update() {
    const oldValue = this.value
    this.value = this.get()
    this.callback.call(this.vm, this.value, oldValue)
  }
}

/**
 * 将字符串路径解析成函数。
 */ 
function parsePath(path) {
  const segments = path.split('.')
  return function(obj) {
    for (let i = 0; i < segments.length; i++) {
      if (!obj) return
      obj = obj[segments[i]]
    }
    return obj
  }
}

代码展示

下面是一个简单的代码示例，它可以在控制台中输出 data 对象中 count 属性的值以及更新后的值：

<body>
  <div id="app">
    {{ count }}
  </div>
</body>

<script>
  const data = { count: 0 }

  new Vue({
    el: '#app',
    data: data
  })

  // 修改 count 属性的值，触发更新操作。
  data.count = 1
</script>

汪汪队出击

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2.x源码解析（一）

一个 Vue.js 应用程序由多个 Vue 实例组成，每个 Vue 实例都代表一个特定的区域内的视图，Vue 实例包含了一个数据模型和一个视图模板。Vue.js 的核心是数据响应式，也就是当我们改变数据时，视图会自动更新。Watcher 的主要作用是收集依赖，并在数据变化时触发相应的更新操作。当一个组件初始化完毕时，会创建一个渲染 Watcher，它会在组件触发更新时执行渲染函数，并进行更新操作。Observer 的主要作用是实现数据响应式机制，它通过递归的方式对数据对象进行劫持。
复制链接

扫一扫