使用响应式数据的主要目的是让数据发生改变的时候实时地改变模板中的显示效果，随之带来的是可以使用计算属性、监听器等便利的辅助功能。
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()
})
})
网友评论