声明响应式状态

ref()

在组合式 API 中，推荐使用 ref() 函数来声明响应式状态。

示例：

import { ref } from 'vue'
const count = ref(0)

ref() 接收参数，并将其包裹在一个带有 .value 属性的 ref 对象中返回：

示例：

const count = ref(0)

console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value  
console.log(count.value) // 1

组件模板中访问 ref声明的状态，需要在setup() 函数中声明并返回。

示例：

import { ref } from 'vue'

export default {
  // `setup` 是一个特殊的钩子，专门用于组合式 API。
  setup() {
    const count = ref(0)

    // 将 ref 暴露给模板
    return {
      count
    }
  }
}

script setup

关于setup代码示例：

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value  
}
</script>

<template>
  <button @click="increment">
    {{ count }}
  </button>
</template>

script setup 中的顶层的导入、声明的变量和函数可在同一组件的模板中直接使用。

深层响应性

就是说当一个结构复杂的对象属性发生变化时也可以检测到。

示例：

import { ref } from 'vue'

const obj = ref({
  nested: { count: 0 },
  arr: ['foo', 'bar']
})

function mutateDeeply() {
  // 以下都会按照期望工作
  obj.value.nested.count  
  obj.value.arr.push('baz')
}

DOM 更新时机

DOM 更新是异步的。所以要等待 DOM 更新完成后再执行额外的代码，可以使用 nextTick()

示例：

import { nextTick } from 'vue'

async function increment() {
  count.value  
  await nextTick()
  // 现在 DOM 已经更新了
}

reactive()

和ref一样reactive也是声明响应式状态的一种方式。

reactive() 是声明对象将使对象本身具有响应性。

示例：

import { reactive } from 'vue'
const state = reactive({ count: 0 })

注意：reactive() 返回的是一个原始对象的 Proxy，它和原始对象是不相等的

示例：

const raw = {}
const proxy = reactive(raw)

// 代理对象和原始对象不是全等的
console.log(proxy === raw) // false

reactive() 的值有类型限制：只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)。它不能持有如 string、number 或 boolean类型。