ref

接受一个参数值并返回一个响应式且可改变的ref对象1. ref对象拥有一个指向内部值的单一属性 .value2. 当ref在模板中使用的时候，他会自动解套，无需在模板内额外书写 .valueconst count = ref(0)const countAdd = ()=>{count.value ++}

reactive

接收一个普通对象然后返回该普通队形的响应式代理，等同于2.x的Vue.observable()
1. 响应式转换是“深层的”：会影响对象内部所有嵌套的属性const state = reactive({count: 0,double: computed(()=>state.count * 2)
})

readonly

传入一个对象（响应式或普通）或ref，返回一个原始对象的只读代理，一个只读的代理是“深层的”：对象内部任何嵌套的属性也都是只读的const original = reactive({ count: 0 })
const copy = readonly(original)
// original 上的修改会触发 copy 上的侦听
original.count++;
// 无法修改 copy 并会被警告
copy.count++; // warning!

computed

1. 传入一个getter函数，返回一个默认不可手动修改的ref对象const num = ref(1);
const doubleNum = computed(()=>{num.value * 2
});
console.log(doubleNum) // 2
doubleNum.value ++ // 错误2.传入一个拥有get和set函数的对象，创建一个可手动修改的计算状态const count = ref(1);
const doubleCount = computed({get:()=>count.value * 2,set: val =>{count.value = val/2}
})
const changeCount = ()=>{count.value ++ ;
}

watchEffect

立即执行传入一个函数，并响应式追踪其依赖并在其依赖变更时重新运行该函数const count = ref(1);
watchEffect(()=>{console.log(`count is `+ count.value )
})

watch

watch API完全等效于 2.x this.$watch1. watch 需要侦听特定的数据源，并在回调函数中执行副作用；2. 默认情况下是懒执行的，也就是说仅在侦听的源变更时才执行回调。const count  = ref(1);watch(count,()=>{console.log("watch count", count.value);
})