VUE源码解析

最新推荐文章于 2024-08-01 21:39:07 发布
最新推荐文章于 2024-08-01 21:39:07 发布
阅读量741 收藏 5
点赞数
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chengwy_1/article/details/120852178
版权

VUE源码理解

1.公式：UI=render(state)

state是输入，UI是页面输出，VUE充当render()这个角色，当vue发现其state变化之后，经过一系列的加工，最终变化反映在UI上

Object的变化侦测
2.变化侦测

变化侦测是追踪状态，一旦数据发生变化，就会去更新视图

3.object的更新变化
let car = {}
let val = 3000
Object.defineProperty(car, 'price', {
  enumerable: true,
  configurable: true,
  get(){
    console.log('price属性被读取了')
    return val
  },
  set(newVal){
    console.log('price属性被修改了')
    val = newVal
  }
})

通过Object.defineProperty()方法给car定义了一个price属性，并把这个属性的读和写分别使用get()和set()进行拦截，每当该属性进行读或写操作的时候就会触发get()和set()。如下图：

img

4.依赖收集
4.1 什么是依赖收集

​ 我们把"谁用到了这个数据"称为"谁依赖了这个数据",我们给每个数据都建一个依赖数组(因为一个数据可能被多处使用)，谁依赖了这个数据(即谁用到了这个数据)我们就把谁放入这个依赖数组中，那么当这个数据发生变化的时候，我们就去它对应的依赖数组中，把每个依赖都通知一遍，告诉他们：“你们依赖的数据变啦，你们该更新啦！”。这个过程就是依赖收集

4.2 何时收集依赖

​ 当其数据获取时会触发getter属性，那么我们就可以在getter中进行收集这个依赖。当其触发setter属性时，就可以调用setter通知其依赖更新

​ 4.3 把依赖收集到哪里

​ 最好的做法是为每一个数据都建立一个依赖管理器，那么依赖管理器Dep类应运如生

// 源码位置：src/core/observer/dep.js
export default class Dep {
  constructor () {
    this.subs = []
  }

  addSub (sub) {
    this.subs.push(sub)
  }
  // 删除一个依赖
  removeSub (sub) {
    remove(this.subs, sub)
  }
  // 添加一个依赖
  depend () {
    if (window.target) {
      this.addSub(window.target)
    }
  }
  // 通知所有依赖更新
  notify () {
    const subs = this.subs.slice()
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update()
    }
  }
}

/**
 * Remove an item from an array
 */
export function remove (arr, item) {
  if (arr.length) {
    const index = arr.indexOf(item)
    if (index > -1) {
      return arr.splice(index, 1)
    }
  }
}

有上方的依赖之后，就可以在getter中收集依赖，在setter中通知依赖更新了，代码如下：

function defineReactive (obj,key,val) {
  if (arguments.length === 2) {
    val = obj[key]
  }
  if(typeof val === 'object'){
    new Observer(val)
  }
  const dep = new Dep()  //实例化一个依赖管理器，生成一个依赖管理数组dep
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get(){
      dep.depend()    // 在getter中收集依赖
      return val;
    },
    set(newVal){
      if(val === newVal){
          return
      }
      val = newVal;
      dep.notify()   // 在setter中通知依赖更新
    }
  })
}
4.3 依赖到底是谁

当其用到了数据，其就是依赖，我们就为其创建一个Watcher实例。在之后的数据发生变化的时候，我们不去通知其依赖进行更新，而是通知响应的watch实例，由watch实例去通知真正的视图

watch的实例如下图

export default class Watcher {
  constructor (vm,expOrFn,cb) {
    this.vm = vm;
    this.cb = cb;
    this.getter = parsePath(expOrFn)
    this.value = this.get()
  }
  get () {
    window.target = this;
    const vm = this.vm
    let value = this.getter.call(vm, vm)
    window.target = undefined;
    return value
  }
  update () {
    const oldValue = this.value
    this.value = this.get()
    this.cb.call(this.vm, this.value, oldValue)
  }
}

/**
 * Parse simple path.
 * 把一个形如'data.a.b.c'的字符串路径所表示的值，从真实的data对象中取出来
 * 例如：
 * data = {a:{b:{c:2}}}
 * parsePath('a.b.c')(data)  // 2
 */
const bailRE = /[^\w.$]/
export function parsePath (path) {
  if (bailRE.test(path)) {
    return
  }
  const segments = path.split('.')
  return function (obj) {
    for (let i = 0; i < segments.length; i++) {
      if (!obj) return
      obj = obj[segments[i]]
    }
    return obj
  }
}

下面我们分析Watcher类的代码实现逻辑：

  1. 当实例化Watcher类时，会先执行其构造函数；
  2. 在构造函数中调用了this.get()实例方法；
  3. 在get()方法中，首先通过window.target = this把实例自身赋给了全局的一个唯一对象window.target上，然后通过let value = this.getter.call(vm, vm)获取一下被依赖的数据，获取被依赖数据的目的是触发该数据上面的getter，上文我们说过，在getter里会调用dep.depend()收集依赖，而在dep.depend()中取到挂载window.target上的值并将其存入依赖数组中，在get()方法最后将window.target释放掉。
  4. 而当数据变化时，会触发数据的setter，在setter中调用了dep.notify()方法，在dep.notify()方法中，遍历所有依赖(即watcher实例)，执行依赖的update()方法，也就是Watcher类中的update()实例方法，在update()方法中调用数据变化的更新回调函数，从而更新视图。

简单总结一下就是：Watcher先把自己设置到全局唯一的指定位置（window.target），然后读取数据。因为读取了数据，所以会触发这个数据的getter。接着，在getter中就会从全局唯一的那个位置读取当前正在读取数据的Watcher，并把这个watcher收集到Dep中去。收集好之后，当数据发生变化时，会向Dep中的每个Watcher发送通知。通过这样的方式，Watcher可以主动去订阅任意一个数据的变化。为了便于理解，我们画出了其关系流程图，如下图：

img

4.4 总结

首先，我们通过Object.defineProperty方法实现了对object数据的可观测，并且封装了Observer类，让我们能够方便的把object数据中的所有属性（包括子属性）都转换成getter/seter的形式来侦测变化。

接着，我们学习了什么是依赖收集？并且知道了在getter中收集依赖，在setter中通知依赖更新，以及封装了依赖管理器Dep，用于存储收集到的依赖。

最后，我们为每一个依赖都创建了一个Watcher实例，当数据发生变化时，通知Watcher实例，由Watcher实例去做真实的更新操作。

其整个流程大致如下：

  1. Data通过observer转换成了getter/setter的形式来追踪变化。
  2. 当外界通过Watcher读取数据时，会触发getter从而将Watcher添加到依赖中。
  3. 当数据发生了变化时，会触发setter，从而向Dep中的依赖（即Watcher）发送通知。
  4. Watcher接收到通知后，会向外界发送通知，变化通知到外界后可能会触发视图更新，也有可能触发用户的某个回调函数等。
Array的变化侦测
1.在哪收集依赖

Array型数据还是在getter中收集依赖

2.使Array型数据可观测
let arr = [1,2,3]
arr.push(4)
Array.prototype.newPush = function(val){
  console.log('arr被修改了')
  this.push(val)
}
arr.newPush(4)

在上面的例子中，针对原生push方法定义了一个newPush方法，这个newPush方法内部调用了原生push方法，这样就保证了新的newPush方法跟原生push方法具有相同的功能

3.数组方法拦截器

会在其vue中创建一个数组方法拦截器，拦截在数组实例与Array.prototype之间，在拦截器内重写了操作数组的一些方法，当数组实例使用操作数组方法时，其实使用的时拦截器重写的方法，就不再使用其Array.prototype上的原生方法。

img

源码中的拦截器的代码如下：

// 源码位置：/src/core/observer/array.js

const arrayProto = Array.prototype
// 创建一个对象作为拦截器
export const arrayMethods = Object.create(arrayProto)

// 改变数组自身内容的7个方法
const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]

/**
 * Intercept mutating methods and emit events
 */
methodsToPatch.forEach(function (method) {
  const original = arrayProto[method]      // 缓存原生方法
  Object.defineProperty(arrayMethods, method, {
    enumerable: false,
    configurable: true,
    writable: true,
    value:function mutator(...args){
      const result = original.apply(this, args)
      return result
    }
  })
})

在上面的代码中，

1、首先创建了继承自Array原型的空对象arrayMethods，

2、接着在arrayMethods上使用object.defineProperty方法将那些可以改变数组自身的7个方法遍历逐个进行封装。

3、最后，当我们使用push方法的时候，其实用的是arrayMethods.push，而arrayMethods.push就是封装的新函数mutator，

总结：

实标上执行的是函数mutator，而mutator函数内部执行了original函数，这个original函数就是Array.prototype上对应的原生方法。 那么，接下来我们就可以在mutator函数中做一些其他的事，比如说发送变化通知。

4.使用拦截器

当其拦截器做好之后需要将其挂在到数组实例与Array.prototype之间，这样拦截器才能进行生效，只需要把数据的_proto_属性设置为拦截器arrayMethods即可，源代码如下：

export class Observer {
  constructor (value) {
    this.value = value
    if (Array.isArray(value)) {
      const augment = hasProto
        ? protoAugment
        : copyAugment
      augment(value, arrayMethods, arrayKeys)
    } else {
      this.walk(value)
    }
  }
}
// 能力检测：判断__proto__是否可用，因为有的浏览器不支持该属性
export const hasProto = '__proto__' in {}

const arrayKeys = Object.getOwnPropertyNames(arrayMethods)

/**
 * Augment an target Object or Array by intercepting
 * the prototype chain using __proto__
 */
function protoAugment (target, src: Object, keys: any) {
  target.__proto__ = src
}

/**
 * Augment an target Object or Array by defining
 * hidden properties.
 */
/* istanbul ignore next */
function copyAugment (target: Object, src: Object, keys: Array<string>) {
  for (let i = 0, l = keys.length; i < l; i++) {
    const key = keys[i]
    def(target, key, src[key])
  }
}
5.再谈依赖收集
5.1 把依赖收集到了哪里

object数组数据的依赖再getter中收集，而给数组数据添加getter/setter都是在observe类中完成的，所以我们也应该在observer类中收集依赖

export class Observer {
  constructor (value) {
    this.value = value
    this.dep = new Dep()    // 实例化一个依赖管理器，用来收集数组依赖
    if (Array.isArray(value)) {
      const augment = hasProto
        ? protoAugment
        : copyAugment
      augment(value, arrayMethods, arrayKeys)
    } else {
      this.walk(value)
    }
  }
}

5.2 如何收集依赖

数组的依赖也是在getter中收集，那么在getter中如何进行收集，需要在依赖管理器定义一个observer类，我们需要在getter中收集

总结：我们必须在getter中能访问到observer类中的依赖管理器，才能把依赖进行存进去

function defineReactive (obj,key,val) {
  let childOb = observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get(){
      if (childOb) {
        childOb.dep.depend()
      }
      return val;
    },
    set(newVal){
      if(val === newVal){
        return
      }
      val = newVal;
      dep.notify()   // 在setter中通知依赖更新
    }
  })
}

/**
 * Attempt to create an observer instance for a value,
 * returns the new observer if successfully observed,
 * or the existing observer if the value already has one.
 * 尝试为value创建一个0bserver实例，如果创建成功，直接返回新创建的Observer实例。
 * 如果 Value 已经存在一个Observer实例，则直接返回它
 */
export function observe (value, asRootData){
  if (!isObject(value) || value instanceof VNode) {
    return
  }
  let ob
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    ob = value.__ob__
  } else {
    ob = new Observer(value)
  }
  return ob
}

总结：

通过observe函数为被获取的数据arr尝试创建一个Observer实例，在observe函数内部，先判断当前传入的数据上是否有__ob__属性，因为在上篇文章中说了，如果数据有__ob__属性，表示它已经被转化成响应式的了，如果没有则表示该数据还不是响应式的，那么就调用new Observer(value)将其转化成响应式的，并把数据对应的Observer实例返回。

而在defineReactive函数中，首先获取数据对应的Observer实例childOb，然后在getter中调用Observer实例上依赖管理器，从而将依赖收集起来

5.2 如何通知依赖

要想通知依赖，首先要能访问到依赖。要访问到依赖也不难，因为我们只要能访问到被转化成响应式的数据value即可，因为vaule上的__ob__就是其对应的Observer类实例，有了Observer类实例我们就能访问到它上面的依赖管理器，然后只需调用依赖管理器的dep.notify()方法，让它去通知依赖更新即可。源码如下：

/**
 * Intercept mutating methods and emit events
 */
methodsToPatch.forEach(function (method) {
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator (...args) {
    const result = original.apply(this, args)
    const ob = this.__ob__
    // notify change
    ob.dep.notify()
    return result
  })
})

上面代码中，由于我们的拦截器是挂载到数组数据的原型上的，所以拦截器中的this就是数据value，拿到value上的Observer类实例，从而你就可以调用Observer类实例上面依赖管理器的dep.notify()方法，以达到通知依赖的目的。

OK，以上就基本完成了Array数据的变化侦测

6.深度侦测

在vue中，不论是object型数据还是Array型数据所实现的数据变化侦测都是深度侦测，深度侦测不但要侦测数据本身的变化买还是要侦测数据中子数据的变化

let arr = [
  {
    name:'NLRX'，
    age:'18'
  }
]

数组中包含了一个对象，如果该对象的某个属性发生变化就会被侦测到，这就是深度侦测

7.数组新增元素的侦测

思路：需要拿到新增的这个元素，然后调用observe函数将其转换即可

/**
 * Intercept mutating methods and emit events
 */
methodsToPatch.forEach(function (method) {
  // cache original method
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator (...args) {
    const result = original.apply(this, args)
    const ob = this.__ob__
    let inserted
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args   // 如果是push或unshift方法，那么传入参数就是新增的元素
        break
      case 'splice':
        inserted = args.slice(2) // 如果是splice方法，那么传入参数列表中下标为2的就是新增的元素
        break
    }
    if (inserted) ob.observeArray(inserted) // 调用observe函数将新增的元素转化成响应式
    // notify change
    ob.dep.notify()
    return result
  })
})

如果是push或unshift方法，那么传入参数就是新增的元素;如果是splice方法，那么传入参数列表中下标为2的就是新增的元素，拿到新增的元素后，就可以调用observe函数将新增的元素转化成响应式的了

缺点：

对于数组变化侦测是通过拦截器实现的，也就是说只要是通过数组原型上的方法对数组进行操作就都可以侦测到，但是别忘了，我们在日常开发中，还可以通过数组的下标来操作数据，如下：

let arr = [1,2,3]
arr[0] = 5;       // 通过数组下标修改数组中的数据
arr.length = 0    // 通过修改数组长度清空数组

而使用上述例子中的操作方式来修改数组是无法侦测到的。Vue增加了两个全局API:Vue.set和Vue.delete

总结：

对于Array型数据也在getter中进行依赖收集；其次我们发现，当数组数据被访问时我们轻而易举可以知道，但是被修改时我们却很难知道，为了解决这一问题，我们创建了数组方法拦截器，从而成功的将数组数据变的可观测。接着我们对数组的依赖收集及数据变化如何通知依赖进行了深入分析；最后我们发现Vue不但对数组自身进行了变化侦测，还对数组中的每一个元素以及新增的元素都进行了变化侦测，

chengwy_1
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 项目源码
08-07
一个公司做的vue项目，基本vue的功能都用到了，源码请勿举报
vue源码解析.zip
05-13
本资料"vue源码解析.zip"包含了一份名为"vue.pdf"的文档，预计会详细阐述Vue的核心概念、设计模式以及源码实现。 首先，Vue.js 的核心特性包括双向数据绑定、组件系统、指令系统和虚拟DOM。双向数据绑定通过`v-...
vue源码解析
weixin_45229434的博客
03-24 715
vue之所以能适应基础的场景开发，除了经常提到的支持组件开发，除了它有完善的响应式系统之外，还提供了一些丰富的api方法，不管是静态还是原型方法，它们都丰富到足以满足我们日常基础的开发需求。首先是原型上的属性方法，在构造函数的定义之后，有这样五个函数，他们分别针对不同场景定义了Vue原型上的属性和方法。// 定义Vue原型上的init方法(内部方法) initMixin(Vue);// 定义原型上跟数据相关的属性方法 stateMixin(Vue);
基于SpringBoot+Vue+uniapp的电商平台的详细设计和实现(源码+lw+部署文档+讲解等)
最新发布
qdy0007的博客
08-01 313
🌞博主介绍：✌全网粉丝15W+,CSDN特邀作者、211毕业、高级全栈开发程序员、大厂多年工作经验、码云/掘金/华为云/阿里云/InfoQ/StackOverflow/github等平台优质作者、专注于Java、小程序技术领域和毕业项目实战，以及程序定制化开发、全栈讲解、就业辅导✌🌞👇🏻精彩专栏 推荐订阅👇🏻2023-2024年最值得选的微信小程序毕业设计选题大全：100个热门选题推荐✅2023-2024年最值得选的Java毕业设计选题大全：500个热门选题推荐✅Java精品实战案例《500套》
vue的源码解析
vue
06-18 1322
一、目录结构 1、src ├──compiler#编译相关 ├──core#核心代码 ├──platforms#不同平台的支持 ├──server#服务端渲染 ├──sfc#.vue文件解析 ├──shared#共享代码 core目录：包含了Vue.js的核心代码，包括内置组件、全局API封装，Vue实例化、观察者、虚拟...
vue 源码解析
wanglun_的博客
07-14 3331
watch：watcher解析表达式，收集依赖，在依赖（表达式值）改变时触发回调（handler）；调用所有watcher的update更新。数据双向绑定：用Object.defineProperty方法重写data中每个数据的get，set方法，在get中执行依赖收集（执行 Dep.depend 方法）和set中派发更新通知（执行 Dep.notify 方法）。computed。
Vue-Object.defineProperty:Vue源码解析之手写Vue源码-源码解析
03-24
本篇文章通过学习文档及视频教程实现手写一个简易的Vue原始码实现数据双向绑定，解析指令等。 几种实现双向绑定的做法 目前几种主流的mvc（vm）框架都实现了单向数据绑定，而我所理解的双向数据绑定无非就是在单向...
vue源码解析.txt
08-06
Vue源码解析, 有需要的小伙伴可以下载下来看一看，一起学习
Vue源码解析
超频化石鱼的博客
05-31 6797
本文仅对Vue主体做一个流程化的简单解析，其他详细功能的代码分析过程是相同的。阅读源码之前，首先要确保对Vue.js的使用较为熟悉。先知道怎么用，再研究怎么实现。 首先去github下载官方源码：https://github.com/vuejs/vue当前版本为2.5.17。解压缩。为了方便查看，导入到webstrom中：源码必然在src文件夹。查看src文件夹：从文件夹名看，compiler应该...
Vue源码解析（详细篇）
weixin_46996561的博客
12-19 4216
vue数据观测实现原理，模版编译过程，模版挂载过程分析
Vue源码分析（一）
qq_51201589的博客
05-02 845
一、初始化 源码目录 1.new Vue() 当我们new Vue({el:'#app',data:{}}) 时候，这是就要找到Vue的构造函数 该文件的路径为src\core\instance\index.js Vue的构造函数 判断环境并且 立即调用this._init()方法，并把参数传入。 function Vue (options) { 判断是否为生产环境并且 检查vue是否在this的prototype的原型上 // if (process.env.NODE_ENV
Vue源码详细解析
大灰狼的小绵羊哥哥的博客
10-22 396
Vue源码详细解析教程包含了Vue中从数据observe到模板解析、transclude、compile、link、指令的bind、update、dom批处理更新、数组diff等等环节，基本涵盖了Vue整个生命周期过程。订阅新文章请watch本项目。 文章 主线剧情 Vue源码详细解析(一)--数据的响应化 主要介绍了Vue如何实现数据的相应化，以及面对getter/setter无法监...
Vue.use源码分析
dianwo1613的博客
04-15 138
我想有过vue开发经验的，对于vue.use并不陌生。当使用vue-resource或vue-router等全局组件时，必须通过Vue.use方法引入，才起作用。那么vue.use在组件引入之前到底做了那些事情呢？让我们一窥究竟。 先上vue.use源码 Vue.use = function (plugin) { /* istanbul ignore if */ ...
vue源码分析
MorningDuGe
08-09 1752
一、从了解一个开源项目入手 要看一个项目的源码，不要一上来就看，先去了解一下项目本身的元数据和依赖，除此之外最好也了解一下 PR 规则，Issue Reporting 规则等等。特别是“前端”开源项目，我们在看源码之前第一个想到的应该是：package.json文件。 在 package.json 文件中，我们最应该关注的就是 scripts 字段和 devDependencies 以
Vue源码解析011：入门与runtime理解
在本篇Vue源码解析文章中，我们将深入探讨03 Vue源码剖析第11章的内容，主要围绕目标环境的搭建、源码学习方法以及Vue的初始化过程进行讲解。首先，为了进行源码研究，你需要从官方GitHub仓库克隆Vue项目...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值