响应式API
- ref
- unref
- toRef
- toRefs
- isRef
- customRef
- shallowRef
- triggerRef
- computed
- watch
- watchEffect
1、解构带来的响应式陷阱
我们习惯了ES6的对象解构风格,但这在composition- api
里可能会有陷阱。因为结构可能会让你的响应式对象失去预期中的响应特性。
<template>
<div id="app">
{
{count}}
<button @click="addCount"></button>
</div>
</template>
<script>
import { reactive } from '@vue/runtime-dom'
export default {
setup() {
const data = reactive({
count: 0
})
function addCount() {
data.count += 1
}
return {
data,
count: data.count,
addCount
}
}
};
</script>
比如这里,button的click时候,不会得到预期的count
的增加。因为setup执行返回的count
并不是响应式的。
也就是说,