Vue官网所说的低侵入式含义

人生天地之间，若白驹之过隙，忽然而已

提出问题

在观看vue官网当中，在深入响应式系统出现一段话：

Vue 最标志性的功能就是其低侵入性的响应式系统。组件状态都是由响应式的 JavaScript 对象组成的。当更改它们时，视图会随即自动更新。这让状态管理更加简单直观，但理解它是如何工作的也是很重要的，这可以帮助我们避免一些常见的陷阱。在本节中，我们将深入研究 Vue 响应性系统的一些底层细节。

那什么叫低侵入式的响应式系统？

响应式系统

在此之前要知道什么叫响应式系统：

响应式系统是一种使自动使数据源（模型）与数据表示（视图）层自动保持同步的机制。每次模型更改时，都会重新渲染视图。

响应式系统的目标是灵敏度高，系统稳健一直有回复，松耦合和可扩展。我们定义响应式系统的4个显著特点：能灵敏响应请求的（Responsive），能回复的（Resilient），可伸缩扩展的（Elastic），基于消息驱动的（Message Driven）。

在vue官网解释中：

Vue 2 使用 getter / setters 完全是出于支持旧版本浏览器的限制。而在 Vue 3 中则使用了 Proxy 来创建响应式对象，仅将 getter / setter 用于 ref。下面的伪代码将会说明它们是如何工作的：

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      track(target, key)
      return target[key]
    },
    set(target, key, value) {
      target[key] = value
      trigger(target, key)
    }
  })
}

function ref(value) {
  const refObject = {
    get value() {
      track(refObject, 'value')
      return value
    },
    set value(newValue) {
      value = newValue
      trigger(refObject, 'value')
    }
  }
  return refObject
}

侵入式

而侵入性：是指强迫你使用新的语法、数据类型。比如a2=a1+a0，为了实现 MVVM 的效果，你需要创建各种 Model、View 实例，表面上你是在写 JS，实际上你是在写基于那个库的 API 的某种方言（似曾相识：你以为你在写 JS，其实你写的是 jQuery）。

反观 Vue，你只是在给某个对象的某个属性赋值而已，用以实现 MVVM 的逻辑并没有体现在你书写的代码上。这就是低侵入式。