Vue 官方很用心地寫了詳細的文件來跟大家解說 What is Reactivity?，內容主要是解說一些 Vue3 如何透過 Proxy 來做到資料驅動，有興趣的朋友可以自己看過。

建立 Reactive State

下面範例中的 reactive 等價於 Vue 2 的 Vue.observable。

import { reactive } from 'vue'

// reactive state
const state = reactive({
  count: 0
})

建立原始值的 Reactive State

原始值(primitive value)又稱基值，JS 的基值有：字串、數字、布林、null、undefined

有時候你會需要使用基值做為資料區動源， Vue 3 提供 ref 給我們，ref 內部會把基值使用物件包住然後丟給 reactive：

import { ref } from 'vue'

const count = ref(0)

console.log(count.value) // 0

count.value = 2

console.log(count.value) // 2

由於基值被物件包裹，因此在讀寫上需要透過 value 屬性。

不過，在 SFC 中我們不必寫 value，因為 setup 方法會自動幫我們 unwrap。

<template>
  <div>
    <span>{{ count }}</span>
    <button @click="count ++">Increment count</button>
  </div>
</template>

<script>
  import { ref } from 'vue'
  export default {
    setup() {
      const count = ref(0)
      return {
        count
      }
    }
  }
</script>

解構附值 Reactive State

有的時候我們需要從一個比較大的物件裡面拿出幾個屬性來用
但於此同時，我們希望拿出來的屬性值也是響應式的，這時可以用 toRefs

import { reactive, toRefs } from 'vue'

const book = reactive({
  author: 'Vue Team',
  title: 'Vue 3 Guide'
})

let { author, title } = toRefs(book)

title.value = 'Hello Vue 3'

console.log(book.title) // 'Hello Vue 3'

純讀的 Reactive 物件

有的時候我們會希望物件被建立之後只能讀，不能改，這時候可以使用 readonly

import { reactive, readonly } from 'vue'

const original = reactive({ count: 0 })

const copy = readonly(original)

// 調整原始物件是可以的，copy 的值會跟著調整
original.count++

copy.count++ // 直接修改 readonly 的 copy，會觸發 warning: "Set operation on key 'count' failed: target is readonly."