Vue 3为何引入ref/reactive？与Vue 2的对比分析

我要探讨的并非 ref 与 reactive 的区别——这类内容随便搜都能找到，核心是对比 Vue 2，Vue 3 为什么要引入这两个 API。

我之前大量使用 Vue 2，下面是一个基础示例：

<div id="app">
  <h1>{{ title }}</h1>
  <button @click="changeTitle">Change title</button>
</div>

var app = new Vue({
  el: '#app',
  data() {
    return {
      title: "Hello, Vue!"
    };
  },
  methods: {
    changeTitle() {
      this.title = "asdf";
    }
  }
});

我认为这种写法简洁清晰，绝不是因为我习惯了才这么说。

到了 Vue 3，模板可以保持不变，但逻辑代码变成了这样：

const { createApp, ref } = Vue

createApp({
  setup() {
    const title = ref('Hello, Vue!');
    function changeTitle() {
      title.value = "asdf";
    };
    return {
      title, changeTitle
    }
  }
}).mount('#app')

（注：我刚开始学 Vue 3，不确定这是不是正确的代码组织方式。）

在我看来，Vue 3 的写法反而更繁琐：得用 ref(...) 包裹初始值（而且声明成 const 也让我困惑），还必须通过 .value 访问它（模板里除外）。这种感觉像开倒车一样，所以我特别想知道：Vue 3 为什么要引入这两个 API？我肯定这里面有合理的原因，但一直没找到相关的说明。

内容的提问来源于stack exchange，提问作者Christallkeks