关于javascript:为什么-Vue30-要重写响应式系统

7次阅读

共计 4806 个字符，预计需要花费 13 分钟才能阅读完成。

面试的时候常常被问到 响应式 相干的内容，而 Vue3.0 更新后，面试官又有了新的武器；

面试官：为什么 Vue3.0 要重写响应式零碎？

懵逼树上懵逼果，懵逼树下你和我，面试官在问什么，我该怎么答复，齐全不晓得怎么回事；

有些教训的小伙伴可能会从解释 Proxy 的益处开始简略聊一下，比方：Proxy 是间接代理对象，而不是劫持对象的属性；更好的数组监控；

这样的答复，勉强算是合格吧

那到底应该怎么答呢？

面试官背地的出题逻辑

别急，咱们先整顿一下思路，孙子兵法有云：“知己知彼，百战不殆”；面试就像打仗，你来我往，所以咱们须要换位思考，想一想，为什么面试官会问这样一个问题？面试官想从这个问题里失去什么答复？这个问题能够考查哪些技术点？想分明这个问题，再回到本人身上，这些技术点，你都把握了吗？

说得直白一点，面试就像考试，你须要先读题、审题能力答好这道题；

为什么很多人认为“面试造火箭，工作拧螺丝”？因为没有换位思考，没有想分明面试题背地的逻辑；

那咱们想分明这个逻辑之后，须要咱们做的就是提取技术点，整顿思路，做出对应解答；当然， 前提是你须要具备这些技术能力

那么接下来，我就尝试拆解一下这个面试题了，提取其中的知识点。

对于你来说，就是要看看这些知识点，你都把握了多少？

为什么 Vue3.0 要重写响应式零碎 ?

为什么重写？如果之前好好的，重写就没有意义，那之前存在什么问题，当初是怎么解决的？就是关键点了；

不晓得你对 Vue2.x 的响应式把握多少，是不是欠下了技术的债呢？没关系，我来帮你还债，先梳理 Vue2.x 的响应式；

其实基于这个面试题，背地还有很多技术点，下面这些，是与以后题目有间接关系的，理论面试中，很有可能基于这些技术点，在进行深刻交换，这里就不扩大了，你能把当初这些问题理分明，就算赚到了；

其实对于这一点，在 Vue 的官网文档中，早曾经有过阐明了，而且说得十分具体；官网文档：https://cn.vuejs.org/v2/guide/reactivity.html

当你把一个一般的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并应用 Object.defineProperty 把这些 property 全副转为 getter/setter。Object.defineProperty 是 ES5 中一个无奈 shim 的个性，这也就是 Vue 不反对 IE8 以及更低版本浏览器的起因。
这些 getter/setter 对用户来说是不可见的，然而在外部它们让 Vue 可能追踪依赖，在 property 被拜访和批改时告诉变更。这里须要留神的是不同浏览器在控制台打印数据对象时对 getter/setter 的格式化并不同，所以倡议装置 vue-devtools 来获取对检查数据更加敌对的用户界面。
每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会告诉 watcher，从而使它关联的组件从新渲染。

咱们应用官网给的一张图示，来梳理整个流程；

咱们先来看一段代码

data 中的 obj 就是一个一般的 JavaScript 对象，通过点击 Click 按钮，将获取到的随机数赋值给 this.message，而 this.message 指向的就是 data 中 obj 对象的 message 属性；当 message 产生数据扭转时，页面中 H1 标签的内容会随之扭转，这个过程就是就是响应式的；那么 Vue 是如何实现的呢？

首先，Vue 外部应用 Object.defineProperty() 将 Data 中的每一个成员都转换为 getter / setter 的模式；getter 用来依赖收集，setter 用来派发更新；而模板内容，最终会被编译为 render 函数，在 render 函数中，咱们能发现 _v(_s(message)) message 被拜访了，就会触发 getter 来进行依赖收集，而在代码中的点击事件中，一旦事件处理程序被触发执行，那么 message 则会被批改，就会触发 setter 来进行派发更新；

尽管流程理分明了，然而总感觉少点什么，怎么能力更通透呢？

咱们用代码来模仿整个的实现过程；

defineProperty 模仿代码

defineProperty 的根本用法，间接看手册就行了：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

咱们来看看代码：

<div id="app"> 
    hello 
</div> 
<script> 
    // 模仿 Vue 中的 data 选项 
    let data = {msg: 'hello'} 
    // 模仿 Vue 的实例 
    let vm = {} 
    // 数据劫持：当拜访或者设置 vm 中的成员的时候，做一些干涉操作 
    Object.defineProperty(vm, 'msg', { 
      // 可枚举（可遍历）enumerable: true, 
      // 可配置（能够应用 delete 删除，能够通过 defineProperty 从新定义）configurable: true, 
      // 当获取值的时候执行 
      get () {console.log('get:', data.msg) 
        return data.msg 
      }, 
      // 当设置值的时候执行 
      set (newValue) {console.log('set:', newValue) 
        if (newValue === data.msg) {return} 
        data.msg = newValue 
        // 数据更改，更新 DOM 的值 
        document.querySelector('#app').textContent = data.msg 
      } 
    }) 
    // 测试 
    vm.msg = 'Hello World' 
    console.log(vm.msg) 
</script>

你没有看错，加上正文，一共 36 行代码，这就是 Vue2.x 对响应式实现的整个流程；
持续实现多个数据的响应式

<body>
  <div id="app">
    hello
  </div>
  <script>
    // 模仿 Vue 中的 data 选项
    let data = {
      msg: 'hello',
      count: 10
    }
    // 模仿 Vue 的实例
    let vm = {}
    proxyData(data)
    function proxyData(data) {
      // 遍历 data 对象的所有属性
      Object.keys(data).forEach(key => {
        // 把 data 中的属性，转换成 vm 的 setter/setter
        Object.defineProperty(vm, key, {
          enumerable: true,
          configurable: true,
          get () {console.log('get:', key, data[key])
            return data[key]
          },
          set (newValue) {console.log('set:', key, newValue)
            if (newValue === data[key]) {return}
            data[key] = newValue
            // 数据更改，更新 DOM 的值
            document.querySelector('#app').textContent = data[key]
          }
        })
      })
    }
    // 测试
    vm.msg = 'Hello World'
    console.log(vm.msg)
  </script>
</body>

下面的代码只是模仿了响应式的原理，但 Vue 在实现中，必定不会那么简略，接下来，咱们看一下源码呀……

Vue2 源码解读

首先找到响应式代码的解决地位：

要害地位	作用	源码地位
function Vue () {}	Vue 构造函数	core/instance/index.js:8
Vue.prototype._init	初始化组件实例对象	core/instance/init.js:16
initState	初始化组件状态相干成员	core/instance/state.js:48
initData	初始化用户传入的 data 数据	core/instance/state.js:112
observe	察看 data	core/observer/index.js:110

要害地位	作用	源码地位
observe	察看 data	core/observer/index.js:110
class Observer	Observer 逻辑	core/observer/index.js:37
walk	遍历对象成员别离解决	core/observer/index.js:64
defineReactive	为组件实例定义响应式数据	core/observer/index.js:135
Object.defineProperty	拦挡数据的拜访和批改	core/observer/index.js:157

看完 Vue2.x 响应式的代码，咱们再回过头来思考最开始的问题， 为什么 Vue3.0 要重写响应式零碎 ?

为什么重写？如果之前好好的，重写就没有意义，那之前存在什么问题，换句话问就是 defineProperty 有什么问题？

Object.defineProperty 的问题

其实，defineProperty 的问题，在 Vue2.x 的手册中，曾经说过了；“哎，很多人就是不看文档啊”
https://cn.vuejs.org/v2/guide/reactivity.html#%E5%AF%B9%E4%BA%8E%E6%95%B0%E7%BB%84
上面别离应用 Vue2 和 Vue3 实现了一个小性能，代码截然不同，性能当然也一样，然而，在 Vue2 中就会有 Bug，而运行在 vue3 中的，则没有任何问题；

Vue2:

Vue3:

其外围点在于 defineProperty 不能很好的实现对数组下标的监控，而在 Vue2 的实现代码中，没有更好的计划对此进行改善，尤大索性间接放弃了实现；对于这个问题，尤大也在 github 做过回应，截个图给大家看看；

那么，Vue 目前还没有解决的问题，Vue3 中显然是曾经解决的了，问题是，Vue3 是如何解决的呢？后面在 Vue3 的代码中咱们应用的是传统的 Options Api 来实现的数据响应式，而在 Vue3 中全新的 Composition Api 也实现了响应式零碎，咱们先来感受一下 Composition Api 的根底用法

Composition API 的响应式零碎

ref 响应式

reactive 响应式

Vue3 中的响应式是如何实现的呢？关键点在于 Proxy 函数；

Proxy 实现原理

应用 Proxy 实现的响应式代码，要比应用 defineProperty 的代码简略得多，因为 Proxy 人造的可能对整个对象做监听，而不须要对数据行遍历后做监听，同时也就解决了数组下标的问题；
咱们来一段模仿代码看一下：

<div id="app">
    hello
  </div>
  <script>
    // 模仿 Vue 中的 data 选项
    let data = {
      msg: 'hello',
      count: 0
    }

    // 模仿 Vue 实例
    const vm = new Proxy(data, {
      // 执行代理行为的函数
      // 当拜访 vm 的成员会执行
      get (target, key) {console.log('get, key:', key, target[key])
        return target[key]
      },
      // 当设置 vm 的成员会执行
      set (target, key, newValue) {console.log('set, key:', key, newValue)
        if (target[key] === newValue) {return}
        target[key] = newValue
        document.querySelector('#app').textContent = target[key]
      }
    })

    // 测试
    vm.msg = 'Hello World'
    console.log(vm.msg)
  </script>

正文完