import { reactive,toRefs } from '@vue/composition-api'
setup(){
// ball 是一个 Observer
const ball = reactive({
show: false,
el: ""
});
// ballToRefs 就是一个普通的Object，但是ballToRefs里面的所有属性都是响应式的（RefImpl）
const ballToRefs = toRefs(ball)
// ref和原始属性是“链接的”
ball.show = true
console.log(ballToRefs.show) // true
ballToRefs.show.value = false
console.log(ballToRefs.show) // false
return {
...ballToRefs // 将ballToRefs对象展开，我们就可以直接在template模板中直接这样使用这个对象上的所有属性！
}
}点击添加按钮，小球飞入购物车动画：
<template>
<div class="ballWrap">
<transition @before-enter="beforeEnter" @enter="enter" @afterEnter="afterEnter">
<!-- 可以直接使用show-->
<div class="ball" v-if="show">
<li class="inner">
<span class="cubeic-add" @click="addToCart($event,item)">
<svg-icon class="add-icon" icon-class="add"></svg-icon>
</span>
</li>
</div>
</transition>
</div>
</template>computed
computed函数的第一个参数，可以接收一个函数，或者是一个对象！如果是函数默认是getter函数，并为getter返回的值返回一个只读的ref对象。
import { computed } from '@vue/composition-api'const count = ref(1)
// computed接收一个函数作为入参
const plusOne = computed(() => count.value + 1)
console.log(plusOne.value) // 2
plusOne.value++ // 错误，plusOne是只读的！
或者也可以是个对象，可以使用具有get和set功能的对象来创建可写ref对象。
const count = ref(1)
// computed接收一个对象作为入参
const plusOne = computed({
get: () => count.value + 1,
set: val => {
count.value = val - 1
}
})plusOne.value = 1
console.log(count.value) // 0
watch
watch(source, cb, options?)
该watchAPI与2.x this.$watch（以及相应的watch选项）完全等效。
观察单一来源
观察者数据源可以是返回值的getter函数，也可以直接是ref：
// watching a getter函数
const state = reactive({ count: 0 })
watch(
() => state.count, // 返回值的getter函数
(count, prevCount,onCleanup) => {
/* ... */
}
)// directly watching a ref
const count = ref(0)
watch(
count, // 也可以直接是ref
(count, prevCount,onCleanup) => {
