reactive

是一个函数，它接收一个普通对象然后返回该普通对象的响应式代理。

const obj = reactive({ count: 0 })

let todos = reactive([
       {id: 1, title: '任务一', completed: false},
       {id: 2, title: '任务二', completed: true},
       {id: 3, title: '任务三', completed: false}
]);

返回的对象是传入对象的映射，返回的代理对象不等于原始对象，但响应式转换是“深层的”：会响应对象内部所有嵌套的属性，不会因为嵌套过多而失去响应。所以仅使用代理对象而避免依赖原始对象即可。

ref

是一个函数，它返回一个响应式且可改变的 ref 对象，可选接收的对象参数作为默认值。ref 对象拥有一个指向内部值的单一属性 .value：

const count = ref(0)
console.log(count.value) // 0

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

如果默认值是普通类型则直接响应，如果是对象类型则调用 reactive 方法进行深层响应转换。

在模板中访问

当 ref 作为渲染上下文的属性返回（即在setup() 返回的对象中）并在模板中使用时，它会自动解套，无需在模板内额外书写 .value：

<template>
  <div>{{ count }}</div>
</template>

<script>
  export default {
    setup() {
      return {
        count: ref(0),
      }
    },
  }
</script>

作为响应式对象的属性访问

当 ref 作为 reactive 对象的 property 被访问或修改时，也将自动解套 value 值，其行为类似普通属性：

const count = ref(0)
const state = reactive({
  count,
})

console.log(state.count) // 0

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

注意如果将一个新的 ref 分配给现有的 ref，将替换旧的 ref：

const otherCount = ref(2)

state.count = otherCount
console.log(state.count) // 2
console.log(count.value) // 1

注意当嵌套在 reactive Object 中时，ref 才会解套。从 Array 或者 Map 等原生集合类中访问 ref 时，不会自动解套：

const arr = reactive([ref(0)])
// 这里需要 .value
console.log(arr[0].value)

const map = reactive(new Map([['foo', ref(0)]]))

// 这里需要 .value
console.log(map.get('foo').value)

computed

Vue3的计算属性，是个函数，用法有两种。

传入一个 getter 函数，返回一个默认不可手动修改的 ref 对象。

const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

plusOne.value++ // 错误！

传入一个拥有 get 和 set 函数的对象，创建一个可手动修改的计算状态。

const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  },
})

plusOne.value = 1
console.log(count.value) // 0

effect

也就是监听器——当某响应式数据发生改变的时候，执行相应的副作用。实际使用时有两种函数watchEffect和watch。

watchEffect

立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数。

const count = ref(0)

watchEffect(() => console.log(count.value))
// -> 打印出 0

setTimeout(() => {
  count.value++
  // -> 打印出 1
}, 100)

watchEffect在追踪依赖方面类似于computed，从传入的函数体内部追踪依赖的响应式数据。相较于computed，watchEffect不需要返回值。

watch

watch API 完全等效于 2.x this.$watch （以及 watch 中相应的选项）。与watchEffect比较，特点有：

懒执行副作用，定义完成后不会立即执行；
侦听特定的数据源，更明确哪些状态的改变会触发侦听器重新运行副作用；
访问侦听状态变化前后的值。

数据源可以监听多个或单个：

侦听单个数据源
侦听器的数据源可以是一个拥有返回值的 getter 函数，也可以是 ref：

// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)

// 直接侦听一个 ref
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})

侦听多个数据源
watcher 也可以使用数组来同时侦听多个源：

watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
  /* ... */
})

两种effect共有的行为

#停止侦听

const stop = watchEffect(() => {
  /* ... */
})

// 之后
stop()

#清除副作用

watchEffect((onInvalidate) => {
  const token = performAsyncOperation(id.value)
  onInvalidate(() => {
    // id 改变时 或 停止侦听时
    // 取消之前的异步操作
    token.cancel()
  })
})