Vue3.0 reactive()、ref()、unref()、isref()、toRefs()、computed()

reactive()

等价于 vue 2.x 中的 Vue.observable() 函数，vue 3.x 中提供了 reactive() 函数，用来创建 响应式的数据对象。

当（引用）数据 直接改变 不会让模版响应 更新渲染：

一秒后页面没有变化

<template>
  <div>count: {
  {state.count}}</div>
</template>

<script>
export default {
  setup() {
    const state = { count: 0 }
    setTimeout(() => {
      state.count++
    })
    return { state }
  }
}
// 一秒后页面没有变化
</script>

reactive 创建的响应式数据对象，在对象属性发生变化时，模版是可以 响应更新渲染的：

一秒后页面数字从0变成1

<template>
  <div>count: {
  {state.count}}</div>
</template>

<script>
import { reactive } from '@vue/composition-api'

export default {
  setup() {
    const state = reactive({ count: 0 })

    setTimeout(() => {
      state.count++
    }, 1000)

    return { state }
  }
}
// 一秒后页面数字从0变成1
</script>

---

ref()

在 Javascript 中，原始类型（如 String，Number）只有值，没有引用。如果在一个函数中返回一个字符串变量，接收到这个字符串的代码只会获得一个值，是无法追踪原始变量后续的变化的。

页面没