阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Vue.js 中是如何检测数组变化?

      问题

      Vue中是如何检测数组变化??

      答案

      • 使用函数劫持的方式,重写了数组的方法
      • Vuedata中的数组,进行了原型链重写。指向了自己定义的数组原型方法,这样当调用数组api时,可以通知依赖更新.如果数组中包含着引用类型。会对数组中的引用类型再次进行监控。

      原理图

      https://a.axihe.com/focus/vue/03.jpg

      对应源码

      const arrayProto = Array.prototype
      export const arrayMethods = Object.create(arrayProto)
      const methodsToPatch = [
        'push',
        'pop',
        'shift',
        'unshift',
        'splice',
        'sort',
        'reverse'
      ]
      methodsToPatch.forEach(function (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
              break
            case 'splice':
              inserted = args.slice(2)
              break
          }
          if (inserted) ob.observeArray(inserted)
          // notify change
          ob.dep.notify() // 当调用数组方法后,手动通知视图更新
          return result
        })
      })
      
      this.observeArray(value) // 进行深度监控
      

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录