vue核心面试题（vue响应式数据的原理）

傷城~ 2023-02-16 06:21 36阅读 0赞

# 响应式数据的原理？ #

1.首先回答对响应式的个理解，提出核心点是通过Object.defineProperty， Vue 在初始化数据时，会传入一个data对象，内部会默认的对data对象进行遍历，使用 Object.defineProperty 重新定义所有属性，当页面取到对应属性时。会进行依赖收集（收集当前组件的watcher） 如果属性发生变化会通 知相关依赖进行更新操作。

2.为什么要使用Object.defineProperty？

它的特点可以使数据的获取和设置增加一个拦截的功能，我们可以在获取和设置的时候增加一些我们自己的逻辑，这个逻辑叫做依赖收集。比如我们取数据的时候可以收集一些依赖，过一会数据变化了可以告诉这些收集的依赖去更新。

3.原理：在vue初始化的时候，会调用一个方法initData，用来初始化用户传入的data数据，然后new Observer，对数据进行观测，如果数据是个对象类型非数组的话，就会调一个this.walk(value)方法进行对象的处理，将对象进行遍历，然后使用defineReactive重新定义，采用的就是Object.defineProperty。

### 总结： ###

Vue采用**数据劫持结合发布者-订阅者模式**的方式来实现数据的响应式，vue在初始话的时候，在initState方法中会调取initData方法初始化data数据，对data对象进行遍历，在这个方法中会调**observe（监听器，观察者）**对用户的数据进行监听，在observe中会对对象new Observe实例化创建监听，在observe中对数据进行判断，如果是数组执行**observeArray**深度进行监听，继续执行observe方法，如果当前传入的是对象则执行this.walk，对对象进行循环，重新定义对象的属性，这时使用的就是**defineReactive**，它是vue中的一个核心方法，用来定义响应式。在defineReactive方法中实例化了一个**Dep（发布者）**，通过**Object.defineProperty**对数据进行拦截，把这些 property 全部转为 getter/setter。get数据的时候，通过dep.depend触发**Watcher（订阅者）**的依赖收集，收集订阅者，如果数据是数组，执行**dependArray**，对数组中的每个值通过depend都添加到依赖。set时，会对数据进行比较，如果数据发生了变化会通过dep.notify发布通知，通知watcher，更新视图。

4.下面来看源码

文件路径：src/core/instance/state.js

![20200611085658143.png][]

源码：

（1）vue在state数据初始化的时候会掉state.js中的一个initState方法

export function initState (vm: Component) {
      vm._watchers = []
      const opts = vm.$options
      if (opts.props) initProps(vm, opts.props)
      if (opts.methods) initMethods(vm, opts.methods)
      if (opts.data) {
        initData(vm) // 初始化数据
      } else {
        observe(vm._data = {}, true /* asRootData */)
      }
      if (opts.computed) initComputed(vm, opts.computed)
      if (opts.watch && opts.watch !== nativeWatch) {
        initWatch(vm, opts.watch)
      }
    }

（2）initData（初始化data）

function initData (vm: Component) {
      let data = vm.$options.data // 用户传入的数据
      data = vm._data = typeof data === 'function'
        ? getData(data, vm)
        : data || {}
      if (!isPlainObject(data)) {
        data = {}
        process.env.NODE_ENV !== 'production' && warn(
          'data functions should return an object:\n' +
          'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
          vm
        )
      }
      // proxy data on instance
      const keys = Object.keys(data)
      const props = vm.$options.props
      const methods = vm.$options.methods
      let i = keys.length
      while (i--) {
        const key = keys[i]
        if (process.env.NODE_ENV !== 'production') {
          if (methods && hasOwn(methods, key)) {
            warn(
              `Method "${key}" has already been defined as a data property.`,
              vm
            )
          }
        }
        if (props && hasOwn(props, key)) {
          process.env.NODE_ENV !== 'production' && warn(
            `The data property "${key}" is already declared as a prop. ` +
            `Use prop default value instead.`,
            vm
          )
        } else if (!isReserved(key)) {
          proxy(vm, `_data`, key)
        }
      }
      // observe data
      observe(data, true /* asRootData */) // 调observe对用户的数据进行观测
    }

（3）observe方法（文件路径：src/core/observe/index.js，专门用来控制数据响应式处理的）

里面会去判断，看数据是否已经被观测过了，如果没又被观测过就会new Observer去观测这个对象

export function observe (value: any, asRootData: ?boolean): Observer | void {
      if (!isObject(value) || value instanceof VNode) { // 不是对象不进行监听
        return
      }
      let ob: Observer | void
      // 如果存在__ob__属性，说明该对象没被observe过，不是observer类
      if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
        ob = value.__ob__
      } else if (
        shouldObserve &&
        !isServerRendering() &&
        (Array.isArray(value) || isPlainObject(value)) &&
        Object.isExtensible(value) && // 是否可扩展
        !value._isVue
      ) {
        ob = new Observer(value) // 监听对象
      }
      if (asRootData && ob) {
        ob.vmCount++
      }
      return ob
    }

（4）new Observer实例（监听的是两种类型，一种是数组，一种是对象）

export class Observer {
      value: any;
      dep: Dep;
      vmCount: number; 
      constructor (value: any) {
        this.value = value
        this.dep = new Dep()
        this.vmCount = 0
        def(value, '__ob__', this)
        if (Array.isArray(value)) { // 判断是否是数组
          if (hasProto) {
            protoAugment(value, arrayMethods) // 改写数组原型方法
          } else {
            copyAugment(value, arrayMethods, arrayKeys)
          }
          this.observeArray(value) // 去深度监听数组中的每一项
        } else { // 如果是对象走这儿
          this.walk(value) // 重新哦定义对象类型数据
        }
      }
      // 对当前传入的对象进行循环，重新定义对象的所有属性
      walk (obj: Object) {
        const keys = Object.keys(obj)
        for (let i = 0; i < keys.length; i++) {
          defineReactive(obj, keys[i]) // defineReactive是核心的方法，定义响应式
        }
      }
      // 深度监听
      observeArray (items: Array<any>) {
        for (let i = 0, l = items.length; i < l; i++) {
          observe(items[i])
        }
      }
    }

（5）defineReactive是vue中的核心方法，用来定义响应式，该方法中使用了Object.defineProperty()

export function defineReactive (
      obj: Object,
      key: string,
      val: any,
      customSetter?: ?Function,
      shallow?: boolean
    ) {
     // 实例化一个Dep，这个Dep存在在下面的get和set函数的作用域中，用于收集订阅数据更新的Watcher
     // 这里一个Dep与一个属性（即参数里的key）相对应，一个Dep可以有多个订阅者。
      const dep = new Dep()
    
      const property = Object.getOwnPropertyDescriptor(obj, key)
      if (property && property.configurable === false) {
        return
      }
    
      // cater for pre-defined getter/setters
      const getter = property && property.get
      const setter = property && property.set
      if ((!getter || setter) && arguments.length === 2) {
        val = obj[key]
      }
    
      let childOb = !shallow && observe(val) // 如果还是一个对象，会继续调用observe方法，递归监听
      Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: function reactiveGetter () { // 数据的取值
          // 如果这个属性在转化之前定义过getter，那么调用该getter得到value的值，否则直接返回val。
          const value = getter ? getter.call(obj) : val
          /*
          *注意这里，这里是Dep收集订阅者的过程，只有在Dep.target存在的情况下才进行这个操作
          *在Watcher收集依赖的时候才会设置Dep.target
          *所以Watcher收集依赖的时机就是Dep收集订阅者的时机。
          *调用get的情况有两种
          *一是Watcher收集依赖的时候（此时Dep收集订阅者）
          *二是模板或js代码里用到这个值，这个时候是不需要收集依赖的，只要返回值就可以了。
          */
          if (Dep.target) {
            dep.depend() // 收集依赖 watcher，当数据变了，会通知watcher更新数据
            // 不仅这个属性需要添加到依赖列表中，如果这个属性对应的值是对象或数组
            // 那么这个属性对应的值也需要添加到依赖列表中
            if (childOb) {
              childOb.dep.depend()
              // 如果是数组，那么数组中的每个值都添加到依赖列表里
              if (Array.isArray(value)) {
                dependArray(value)
              }
            }
          }
          return value
        },
        set: function reactiveSetter (newVal) { // 数据更新
          const value = getter ? getter.call(obj) : val
          /* eslint-disable no-self-compare */
          // 当前的值和数据的值不一样的话，就会掉一个核心的方法dep.notify()
          if (newVal === value || (newVal !== newVal && value !== value)) {
            return
          }
          /* eslint-enable no-self-compare */
          if (process.env.NODE_ENV !== 'production' && customSetter) {
            customSetter()
          }
          // #7981: for accessor properties without setter
          if (getter && !setter) return
          if (setter) {
            setter.call(obj, newVal)
          } else {
            val = newVal
          }
          childOb = !shallow && observe(newVal)
          dep.notify() // 触发数据对应的依赖进行更新，它就会通知视图更新
        }
      })
    }

（6）dependArray()方法，如果不是对象是数组调用该方法

在调用这个函数的时候，数组已经被observe过了，且会递归observe。(看上面defineReactive函数里的这行代码：var childOb = observe(val);)  
         所以正常情况下都会存在\_\_ob\_\_属性，这个时候就可以调用dep添加依赖了。

function dependArray (value: Array<any>) {
      for (let e, i = 0, l = value.length; i < l; i++) {
        e = value[i]
        e && e.__ob__ && e.__ob__.dep.depend() // 添加依赖
        if (Array.isArray(e)) {
          dependArray(e) // 如果还是数据继续调用
        }
      }
    }

（7）dep，（用来添加依赖，通知watcher更新数据）

export default class Dep {
      static target: ?Watcher;
      id: number;
      subs: Array<Watcher>;
    
      constructor () {
        this.id = uid++ // 每个实例中的dep实例的id都是从0开始累加的
        this.subs = []
      }
      // 添加一个订阅者
      addSub (sub: Watcher) {
        this.subs.push(sub)
      }
      // 删除一个订阅者
      removeSub (sub: Watcher) {
        remove(this.subs, sub)
      }
      // 追加依赖
      //让Watcher收集依赖并添加订阅者。
      //Dep.target是一个Watcher, 可以查看Watcher的addDep方法。
      //这个方法做的事情是：收集依赖后，调用了Dep的addSub方法，给Dep添加了一个订阅者
      depend () {
        if (Dep.target) {
          Dep.target.addDep(this)
        }
      }
     // 通知watcher更新，通过调用subs里面的每个Watcher的update发布更新
      notify () {
        const subs = this.subs.slice()
        if (process.env.NODE_ENV !== 'production' && !config.async) {
          subs.sort((a, b) => a.id - b.id)
        }
        for (let i = 0, l = subs.length; i < l; i++) {
          subs[i].update() // 这儿会执行watcher文件下的update方法去更新数据
        }
      }
    }

5.getter/setter方法拦截数据的不足

（1）当对象增删的时候，是监控不到的，因为在observe data的时候，会遍历已有的每个属性添加getter/setter，而后面设置的属性并没有机会设置getter/setter，所以检测不到变化，同样的，删除对象属性的时候，getter/setter会跟着属性一起被删除掉，拦截不到变化。可以通过vue.set和vue.delete去更新数据。

（2）getter/setter是针对对象的，对于数组的修改也是监控不到的。可以通过调用数组的变异方法，或对数组进行深度拷贝克隆来达到更新视图。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDcyMDg2_size_16_color_FFFFFF_t_70][]

## 二、相关概念 ##

1.双向数据绑定

M ，即 model，指的是模型，也就是数据；V 即view，指的是视图，也就是页面展现的部分。  
双向数据绑定为：每当数据有变更时，会进行渲染，从而更新视图，使得视图与数据保持一致（model到view层）；而另一方面，页面也会通过用户的交互，产生状态、数据的变化，这个时候，这时需要将视图对数据的更新同步到数据（view到model层）。

我们上面说的Vue的数据响应式原理其实就是实现数据到视图更新原理，而视图到数据的更新，其实就是此基础上给可表单元素（input等）添加了change等事件监听，来动态修改model和 view。

2.发布-订阅者模型

订阅发布模式定义了一种一对多的依赖关系，让多个订阅者对象同时监听某一个主题对象。这个主题对象在自身状态变化时，会通知所有订阅者对象，使它们能够自动更新自己的状态。  
Vue中的Dep和Watcher共同实现了这个模型

[20200611085658143.png]: https://img-blog.csdnimg.cn/20200611085658143.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDcyMDg2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200611170041550.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDcyMDg2,size_16,color_FFFFFF,t_70