devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue2.0 的响应式原理 私_vue2.0 响应式数据的原理

作者：繁依Fanyi0 | 2024-03-16 08:27:58

赞

踩

vue2.0 响应式数据的原理

使用的Object.defineProperty()重新定义对象，给data的每个属性都添加了getter和setter方法。这时候会为对象的每个属性创建一个Dep实例  （依赖）。Dep实例可以订阅和通知相关的Watcher实例。，  这一步叫  数据劫持  或者 依赖收集

在数据发生更新后调用 set 时会通知发布者 notify 通知对应的订阅者做出数据更新，同时将新的数据根性到视图上显示。 这一步叫 派发更新

同时，为了解决对象属性添加和删除的问题，Vue提供了全局的Vue.set和Vue.delete方法，以及实例的vm.$set和vm.$delete方法。

解释：

（

  1. 在创建 Observer 实例的同时还会创建 Dep 实例，用于保存依赖项。因此每个数据都有 Observer 的实例，每个 Observer 实例中又都有一个 Dep 的实例。
  2. 当 Vue 解析到当解析到模板字符串 {{ }} 时中数据时，就会去创建 Watcher 实例，在 constructor 时会调用自身的 get 方法，该方法不仅将当前的 Watcher 实例赋值给了 Dep.target(表示此时处于依赖收集阶段)，还让这个新实例去读取一下 {{ }} 中的数据，一旦读取，就会触发这个数据的 getter 方法。因为此时正在进行收集依赖，Dep.target 一定是为 true 的，于是顺利地把当前的这个 Watcher 实例记录到了 dep 中的 subs 数组里。再然后将 Dep.target 的值重新赋值为 null，表示退出依赖收集阶段

）

总结：

在Vue2中，响应式原理是通过使用Object.defineProperty方法来实现的。当一个对象被传入Vue的observe函数中时，Vue会为对象的每个属性创建一个Dep实例。Dep实例可以订阅和通知相关的Watcher实例。

当一个属性被访问时，Watcher实例会将自己添加到该属性的Dep实例的订阅列表中。当该属性的值发生变化时，Dep实例会遍历订阅列表，通知所有相关的Watcher实例进行更新。

然而，Vue无法检测到对象属性的添加和删除。为了解决这个问题，Vue提供了全局的Vue.set方法或实例的vm.$set方法来添加属性，使用Vue.delete方法或实例的vm.$delete方法来删除属性。对于数组的变动，Vue无法检测到利用索引设置数组，但可以使用Vue.set方法或实例的vm.$set方法。此外，Vue也无法检测直接修改数组长度，但可以使用splice方法来实现。

总结起来，Vue2的响应式原理通过使用Object.defineProperty方法来实现属性的劫持和侦听，同时使用Dep和Watcher实例来建立属性和依赖之间的关系，并进行更新通知。同时，为了解决对象属性添加和删除的问题，Vue提供了全局的Vue.set和Vue.delete方法，以及实例的vm.$set和vm.$delete方法。

原理：

通过数据劫持 defineProperty + 发布订阅者模式，当 vue 实例初始化后 observer 会针对实例中的 data 中的每一个属性进行劫持并通过 defineProperty() 设置值后在 get() 中向发布者添加该属性的订阅者，

使用的Object.defineProperty()重新定义对象，给data的每个属性都添加了getter和setter方法。
在get的时候会调用dep.depend; 

如果是数组，则调用dependArray(对数组里的每个元素进行递归调用dep.depend);
在set的时候会先判断数据是否更新，未更新不做操作,更新则observe(),且dep.notify()

1 在initState()方法里会对组件的props, methods, data，computed, watch等进行编译初始化=>

2 initData()会先获取组件内部的data数据，然后判断data里的数据和props，或者和methods里的名称重复，则抛出错误提示，然后就会去监听data，执行observe方法=>

3   Observer()  =>   defineReactive, dependArray =>  defineProperty()   =>   Observer()    递归

使用的Object.defineProperty()重新定义对象，给data的每个属性都添加了getter和setter方法。

在get的时候会调用dep.depend;如果是数组，则调用dependArray(对数组里的每个元素进行递归调用dep.depend);
在set的时候会先判断数据是否更新，未更新不做操作,更新则observe(),且dep.notify()

源码解析：

不同版本的vue的源码实现可能会有些不同，我这里的版本是2.6.14

首先我们要知道定义响应式是在哪个时间段实现的，从源码中我们可以看到，是在执行beforeCreate生命周期函数之后，Created之前。也就是说，这也就是我们在beforeCreate无法拿到Data中的数据的原因。

首先我们要知道定义响应式是在哪个时间段实现的，从源码中我们可以看到，是在执行beforeCreate生命周期函数之后，Created之前。也就是说，这也就是我们在beforeCreate无法拿到Data中的数据的原因。

第一步： 在initState方法里会对组件的props, methods, data，computed, watch等进行编译初始化

  1. export function initState (vm: Component) {
  2.   vm._watchers = []
  3.   const opts = vm.$options
  4.   if (opts.props) initProps(vm, opts.props)
  5.   if (opts.methods) initMethods(vm, opts.methods)
  6.   if (opts.data) {
  7.     initData(vm)
  8.   } else {
  9.     observe(vm._data = {}, true /* asRootData */)
  10.   }
  11.   if (opts.computed) initComputed(vm, opts.computed)
  12.   if (opts.watch && opts.watch !== nativeWatch) {
  13.     initWatch(vm, opts.watch)
  14.   }
  15. }
  16.

第二步： initData()会先获取组件内部的data数据，然后判断data里的数据和props，或者和methods里的名称重复，则抛出错误提示，然后就会去监听data，执行observe方法

  1. function initData (vm: Component) {
  2.   let data = vm.$options.data
  3.   data = vm._data = typeof data === 'function'
  4.     ? getData(data, vm)
  5.     : data || {}
  6.   if (!isPlainObject(data)) {
  7.     data = {}
  8.     process.env.NODE_ENV !== 'production' && warn(
  9.       'data functions should return an object:\n' +
  10.       'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
  11.       vm
  12.     )
  13.   }
  14.   // proxy data on instance
  15.   const keys = Object.keys(data)
  16.   const props = vm.$options.props
  17.   const methods = vm.$options.methods
  18.   let i = keys.length
  19.   while (i--) {
  20.     const key = keys[i]
  21.     if (process.env.NODE_ENV !== 'production') {
  22.       if (methods && hasOwn(methods, key)) {
  23.         warn(
  24.           `Method "${key}" has already been defined as a data property.`,
  25.           vm
  26.         )
  27.       }
  28.     }
  29.     if (props && hasOwn(props, key)) {
  30.       process.env.NODE_ENV !== 'production' && warn(
  31.         `The data property "${key}" is already declared as a prop. ` +
  32.         `Use prop default value instead.`,
  33.         vm
  34.       )
  35.     } else if (!isReserved(key)) {
  36.       proxy(vm, `_data`, key) //将data上的属性代理到vm实例上。
  37.     }
  38.   }
  39.   // observe data
  40.   observe(data, true /* asRootData */)
  41. }
  42.

第三步：在这里observe（）中，会先判断data中的数据是否是对象，然后判断data中是否已经有了ob（也就是Observer实例）最后判断是否满足监听的条件。才会创建一个新的Observer对象

  1. /**
  2.  * Attempt to create an observer instance for a value,
  3.  * returns the new observer if successfully observed,
  4.  * or the existing observer if the value already has one.
  5.  */
  6. export function observe (value: any, asRootData: ?boolean): Observer | void {
  7.   if (!isObject(value) || value instanceof VNode) {
  8.     return
  9.   }
  10.   let ob: Observer | void
  11.   if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
  12.     ob = value.__ob__
  13.   } else if (
  14.     shouldObserve &&
  15.     !isServerRendering() &&
  16.     (Array.isArray(value) || isPlainObject(value)) &&
  17.     Object.isExtensible(value) &&
  18.     !value._isVue
  19.   ) {
  20.     ob = new Observer(value)
  21.   }
  22.   if (asRootData && ob) {
  23.     ob.vmCount++
  24.   }
  25.   return ob
  26. }
  27.  
  28.

第四步：

每一个observer实例都有自己的一个Dep, 在new Oberver后，会判断传入的value也就是vm.data是不是数组。

如果是数组，会采用函数劫持的方法重写数组的方法，先判断数组支不支持原型链，支持就将当前数组的原型指向已经重写了Array里的7种方法的arrayMethod，当数组里的方法被调用时，Dep会notify通知视图更新，然后执行ObserveArray方法，如果数组里的数据是对象，则继续回调observe();
如果是对象，则调用this.walk()，在walk()中，会遍历data的属性执行defineReactive()定义响应式
 

  1. /**
  2.  * Observer class that is attached to each observed
  3.  * object. Once attached, the observer converts the target
  4.  * object's property keys into getter/setters that
  5.  * collect dependencies and dispatch updates.
  6.  */
  7. export class Observer {
  8.   value: any;
  9.   dep: Dep;
  10.   vmCount: number; // number of vms that have this object as root $data
  11.  
  12.   constructor (value: any) {
  13.     this.value = value
  14.     this.dep = new Dep()
  15.     this.vmCount = 0
  16.     def(value, '__ob__', this)
  17.     if (Array.isArray(value)) {
  18.       if (hasProto) {
  19.         protoAugment(value, arrayMethods)
  20.       } else {
  21.         copyAugment(value, arrayMethods, arrayKeys)
  22.       }
  23.       this.observeArray(value)
  24.     } else {
  25.       this.walk(value)
  26.     }
  27.   }
  28.  
  29.   /**
  30.    * Walk through all properties and convert them into
  31.    * getter/setters. This method should only be called when
  32.    * value type is Object.
  33.    */
  34.   walk (obj: Object) {
  35.     const keys = Object.keys(obj)
  36.     for (let i = 0; i < keys.length; i++) {
  37.       defineReactive(obj, keys[i])
  38.     }
  39.   }
  40.  
  41.   /**
  42.    * Observe a list of Array items.
  43.    */
  44.   observeArray (items: Array<any>) {
  45.     for (let i = 0, l = items.length; i < l; i++) {
  46.       observe(items[i])
  47.     }
  48.   }
  49. }

第五层：

使用的Object.defineProperty()重新定义对象，给data的每个属性都添加了getter和setter方法。
在get的时候会调用dep.depend;如果是数组，则调用dependArray(对数组里的每个元素进行递归调用dep.depend);
在set的时候会先判断数据是否更新，未更新不做操作,更新则observe(),且dep.notify()
以下是Dep的代码，我们可以将Dep看作一个观察者。
 

  1. /**
  2.  * Define a reactive property on an Object.
  3.  */
  4. export function defineReactive (
  5.   obj: Object,
  6.   key: string,
  7.   val: any,
  8.   customSetter?: ?Function,
  9.   shallow?: boolean
  10. ) {
  11.   const dep = new Dep()
  12.  
  13.   const property = Object.getOwnPropertyDescriptor(obj, key)
  14.   if (property && property.configurable === false) {
  15.     return
  16.   }
  17.  
  18.   // cater for pre-defined getter/setters
  19.   const getter = property && property.get
  20.   const setter = property && property.set
  21.   if ((!getter || setter) && arguments.length === 2) {
  22.     val = obj[key]
  23.   }
  24.  
  25.   let childOb = !shallow && observe(val)
  26.   Object.defineProperty(obj, key, {
  27.     enumerable: true,
  28.     configurable: true,
  29.     get: function reactiveGetter () {
  30.       const value = getter ? getter.call(obj) : val
  31.       if (Dep.target) {
  32.         dep.depend()
  33.         if (childOb) {
  34.           childOb.dep.depend()
  35.           if (Array.isArray(value)) {
  36.             dependArray(value)
  37.           }
  38.         }
  39.       }
  40.       return value
  41.     },
  42.     set: function reactiveSetter (newVal) {
  43.       const value = getter ? getter.call(obj) : val
  44.       /* eslint-disable no-self-compare */
  45.       if (newVal === value || (newVal !== newVal && value !== value)) {
  46.         return
  47.       }
  48.       /* eslint-enable no-self-compare */
  49.       if (process.env.NODE_ENV !== 'production' && customSetter) {
  50.         customSetter()
  51.       }
  52.       // #7981: for accessor properties without setter
  53.       if (getter && !setter) return
  54.       if (setter) {
  55.         setter.call(obj, newVal)
  56.       } else {
  57.         val = newVal
  58.       }
  59.       childOb = !shallow && observe(newVal)
  60.       dep.notify()
  61.     }
  62.   })
  63. }
  64.

第六层 解释   第五层：

depend方法就是将当前dep的实例添加到对应的Watcher中，
notify方法就是通知所有收集的Wacher进行更新，subs[i].update()

  1. /* @flow */
  2.  
  3. import type Watcher from './watcher'
  4. import { remove } from '../util/index'
  5. import config from '../config'
  6.  
  7. let uid = 0
  8.  
  9. /**
  10.  * A dep is an observable that can have multiple
  11.  * directives subscribing to it.
  12.  */
  13. export default class Dep {
  14.   static target: ?Watcher;
  15.   id: number;
  16.   subs: Array<Watcher>;
  17.  
  18.   constructor () {
  19.     this.id = uid++
  20.     this.subs = [] //存储所有订阅的Watcher
  21.   }
  22.  
  23.   addSub (sub: Watcher) {
  24.     this.subs.push(sub)
  25.   }
  26.  
  27.   removeSub (sub: Watcher) {
  28.     remove(this.subs, sub)
  29.   }
  30.  
  31.   depend () {
  32.     if (Dep.target) {
  33.       Dep.target.addDep(this)
  34.     }
  35.   }
  36.  
  37.   notify () {
  38.     // stabilize the subscriber list first
  39.     const subs = this.subs.slice()
  40.     if (process.env.NODE_ENV !== 'production' && !config.async) {
  41.       // subs aren't sorted in scheduler if not running async
  42.       // we need to sort them now to make sure they fire in correct
  43.       // order
  44.       subs.sort((a, b) => a.id - b.id)
  45.     }
  46.     for (let i = 0, l = subs.length; i < l; i++) {
  47.       subs[i].update()
  48.     }
  49.   }
  50. }
  51.  
  52. // The current target watcher being evaluated.
  53. // This is globally unique because only one watcher
  54. // can be evaluated at a time.
  55. Dep.target = null
  56. const targetStack = []
  57.  
  58. export function pushTarget (target: ?Watcher) {
  59.   targetStack.push(target)
  60.   Dep.target = target
  61. }
  62.  
  63. export function popTarget () {
  64.   targetStack.pop()
  65.   Dep.target = targetStack[targetStack.length - 1]
  66. }

第七层.Watcher.js

当解析到模板字符串 {{ }} 时，会默认去 new Watcher 实例。

  1. /**
  2.  * 每一次的 new Watcher 都是独立的,因此构造器接收的三个参数,虽然名字一样但确实不同的数据,就像是 vm.$watch() 接收的参数一样,
  3.  * @param {*} target 需要监视的对象,当做修改时,他就是
  4.  * @param {*} expression 这个对象中的某个属性,它是一个表达式 比如 obj.a.b.c
  5.  * @param {*} callback 回调函数,需要执行的操作 
  6.  */
  7.  
  8. import Dep from "./Dep";
  9.  
  10. // 这个 uid 用于对每一个的 Watcher 实例添加唯一的 id
  11. var uid = 0
  12.  
  13. // 在这里哪一步算是调用了 get 方法???????，解析到模板的时候
  14.  
  15. export default class Watcher {
  16.     constructor(target, expression, callback) {
  17.         console.log('我是 Watcher 构造器');
  18.         this.id = uid++;
  19.  
  20.         // 模板字符串中的整个表达式
  21.         this.target = target;
  22.  
  23.         // 通过拆分表达式(对象中的对象...),获得需要 Watch 的那个数据。比如传入的是 a.b.c.d 我们需要监视属性 d，就需要拆分
  24.         this.getter = parsePath(expression)  // 有两种方法供使用 parsePath 会返回一个函数;如果用 reduce 方法,那么 getter 就会是一个具体的值,此时一定要修改下边的 get 方法!!!
  25.  
  26.         this.callback = callback
  27.  
  28.         // 调用该方法,进入依赖收集阶段
  29.         this.value = this.get()
  30.     }
  31.     // 当更新 dep 中的依赖项时,会调用每一个 Watcher 实例身上的 update 方法
  32.     update() {
  33.         console.log('我是Watcher实例身上的update方法');
  34.         this.run()
  35.     }
  36.  
  37.     // 进入依赖收集阶段,让全局的 Dep.target 设置为 Watcher 本身
  38.     get(){
  39.         // Webpack 在打包的时候 Dep 是全局唯一的,不管多少个JS 文件在用 dep 的时候,都是这一个文件
  40.         // 因此执行到这里
  41.         console.log(this);  // Watcher 实例
  42.         Dep.target = this;   
  43.         // debugger;
  44.         const obj = this.target;
  45.  
  46.         var value;
  47.  
  48.         // 防止找不到,用try catch一下,只要能找,就一直找
  49.         try {
  50.             value = this.getter(obj)    // 获取需要监视的那个值。这里因为constructor 的时候 this.get() 返回的是一个函数
  51.         } finally {
  52.             Dep.target = null   // 清空全局 target 的指向,同时也表示退出依赖收集阶段
  53.         }
  54.         return value        
  55.     }
  56.  
  57.     // 其实可以直接 getAndInvoke,但是 Vue 源码时这样写的
  58.     run(){
  59.         this.getAndInvoke(this.callback)
  60.     }
  61.  
  62.     //
  63.     getAndInvoke(callback){
  64.         // 获取到修改后的新值   旧值是 this.value
  65.         const value = this.get()
  66.         if(value !== this.value || typeof value == 'object'){
  67.             const oldValue = this.value;
  68.             this.value = value;
  69.             callback.call(this.target, value, oldValue)
  70.         }
  71.     }
  72. }
  73.  
  74.  
  75.  
  76.  
  77.  
  78. // 拆分表达式:
  79. // 方法一:将 str 用 . 分割成数组 segments，然后循环数组，一层一层去读取数据，最后拿到的 obj 就是 str 中想要读的数据
  80. // 假设 let o = {a:{b:{c:{d:55}}}},我想要取得 d 的值,经过拆分后的 segments 数组的值为 ['a', 'b', 'c', 'd']
  81. // 第一次循环后 obj = {b:{c:{d:55}}}, 第二次 obj = {c:{d:55}}, 第三次 obj = {d:55}, 第四次 obj = 55
  82. function parsePath(str) {
  83.     let segments = str.split(".");
  84.     return function (obj) {
  85.         for (let key of segments) {
  86.             if (!obj) return;   // 当没有传入 obj 时,直接 return
  87.             obj = obj[key];
  88.         }
  89.         return obj;
  90.     };
  91. }
  92. // 方法二 用 reduce 方法实现
  93. // function parsePathReduce(str) {
  94. //     let segments = str.split(".");
  95. //     let result = segments.reduce((total, item) => {
  96. //         total = total[item]
  97. //         return total
  98. //     }, str)
  99. //     return result
  100. // }

前置知识：


首先要了解三个最重要的对象：
Observer 对象：将 Vue 中的数据对象在初始化过程中转换为 Observer 对象。
Watcher 对象：将模板和 Observer 对象结合在一起生成 Watcher 实例，Watcher 是订阅者中的订阅者。
Dep对象：Watcher 对象和 Observer 对象之间纽带，每一个 Observe r都有一个 Dep 实例，用来存储订阅者 Watcher。
 

过程：

  1. 在生命周期的 initState 方法中将 data，prop，method，computed，watch等所有数据全部进行数据劫持，将所有数据变为 Observer 实例，并且每个数据身上还有 Dep 实例。
  2. 然后在 initRender 方法中也就是模板编译过程，遇到的指令和数据绑定都会生成 Watcher 实例，并且把这个实例存入对应数据的 Dep 实例中的 subs 数组里。这样每一个数据的 Dep 实例里就都存放了依赖关系。
  3. 当数据变化时，数据的 setter 方法被调用，触发 dep.notify 方法，就会通知 Dep 实例依赖列表，执行 update 方法通知 Watcher，Watcher 会执行 run 方法去更新视图。
  4. 更新视图的过程，我猜是 Vue 接下来要进行 diff 算法，对比新旧模板，然后重新渲染页面。
     

缺陷：只能够监听初始化实例中的 data 数据，动态添加值不能响应，要使用对应的 Vue.set()。

  • Vue 是无法检测到对象属性的添加和删除，但是可以使用全局 Vue.set 方法(或 vm.$set 实例方法)。
  • Vue 无法检测利用索引设置数组，但是可以使用全局 Vue.set方法(或 vm.$set 实例方法)。
  • 无法检测直接修改数组长度，但是可以使用 splice。

vue2.0重写数组

  1. 		// 数组方法重写
  2.         let oldArrayPrototy = Array.prototype
  3.         // 使用Object.create 将数组原型上的方法放到newArrayPrototy.prototype上
  4.         let newArrayPrototy = Object.create(arrayFn)
  5.         // 需要重写的数组方法列表
  6.         let method = [
  7.             'push',
  8.             'pop',
  9.             'shift',
  10.             'unshift',
  11.             'reverse',
  12.             'sort',
  13.             'splice'
  14.         ]
  15.         method.forEach((item) => {
  16.         	//newArrayPrototy[item] 就是 arr.某一个方法
  17.             newArrayPrototy[item] = function (...args) {
  18.                 // 关键部分
  19.                 let result = oldArrayPrototy[item].call(this, ...args)
  20.                 // 对传进来的数据做一些处理
  21.                 let insterted
  22.                 switch (item) {
  23.                     case 'push':
  24.                     case 'unshift':
  25.                         insterted = args
  26.                     case 'splice':
  27.                         insterted = args.slice(2)
  28.                     default:
  29.                         break
  30.                 }
  31.                 return result
  32.             }
  33.         })

Vue2.0响应式原理源码解析_玛已的博客-CSDN博客

Vue2的响应式原理_vue2响应式原理_高等数学真简单的博客-CSDN博客

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/248210
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号