了解Vue 3.0中的反应性

撰写本文仅出于我对Vue最酷的部分：反应系统的了解和理解。

背景

众所周知，Vue.js团队正在研究3.0。最近，它发布了第一个Beta版本。这意味着核心技术设计足够稳定。现在，我认为是时候逐步了解Vue 3.0中的内容。那是我最喜欢的部分之一：反应系统。

什么是反应性？

简而言之，反应性意味着，当数据更改时，取决于某些特定数据的计算结果将自动更新。

在现代Web开发中，我们始终需要呈现一些与数据相关或与状态相关的视图。因此，显然，使数据具有响应性可以给我们带来很多好处。在Vue中，反应性系统从其早期版本一直存在到现在。我认为这是Vue如此受欢迎的最大原因之一。

首先让我们看一下Vue早期版本中的反应系统。

Vue的反应性从0.x到1.x

我第一次接触Vue是在2014年左右，我猜是Vue 0.10。那时，您可以通过dataoption 将普通的JavaScript对象传递到Vue组件中。然后，您可以在一个文档片段中将它们用作具有反应性的模板。一旦data发生变化时，视图将自动更新。您也可以使用computed和watch选项以更灵活的方式从反应系统中受益。与更高版本的Vue 1.x相同。

new Vue({
  el: '#app',
  template: '
{{x}} + {{y}} = {{z}}
',
  data() {
    return { x: 1, y: 2 }
  },
  computed: {
    z() { return this.x + this.y }
  },
  watch: {
    x(newValue, oldValue) {
      console.log(`x is changed from ${oldValue} to ${newValue}`)
    }
  }
})

您可能会发现这些API到目前为止并没有太大变化。因为它们完全相同。