ref
上面计算属性返回计算结果是什么？ 如果我们猜测一下内部是如何实现 computed 的，我们可能会得出这样的结论
function computed(getter) {
let value
watchEffect(() => {
value = getter()
})
return value
}
但是我们知道这是行不通的: 如果 value 是一个类似 number 的基本类型，那么一旦返回，它与 computed 内部的更新逻辑的连接就会丢失。 这是因为 JavaScript 基本类型是按值传递的，而不是按引用传递的
当一个值作为属性分配给一个对象时，同样的问题也会发生。 如果被赋为属性或从函数返回时，反应值不能保持其响应性，那么它就没有多大用处。 为了确保我们总是可以读取计算的最新值，我们需要将实际值包装在一个对象中，然后返回该对象
function computed(getter) {
const ref = {
value: null
}
watchEffect(() => {
ref.value = getter()
})
return ref
}所以要拿到ref与computed的值应该是那返回值下面的value
let count = ref(1)console.log(count.value) // 1
let double = computed(() => count.value * 2) // 2
值得注意，当我们在template里面使用ref或者computed的时候，vue会自动把它们用reactive处理无需用count.value或者double.value的值，既<div>{{ count }} {{ double }}</div>即可
toRefs
toRefs API提供了一个方法可以把reactive的值处理为ref
生命周期的hooks
方法与option api基本一致
import { onBeforeMount, onMounted, reactive, watchEffect } from 'vue'export default {
setup() {
const state = reactive({
count: 0
})
const double = computed(() => state.count * 2)
function increment() {
state.count++
}
watchEffect(() => {
console.log(double.value)
})
onMounted(() => {
document.title = 'hello'
})
return {
state,
increment
}
}
}
最后讲讲关于使用composition api如何组织代码
往往是把一个功能的所有状态、方法、都封装到一个函数里面，方便统一管理，如果你按照这种方式来写代码，那么代码的结构大致如下
export default {
setup() { // ...
}
}function useCurrentFolderData(networkState) { // ...
}
function useFolderNavigation({ networkState, currentFolderData }) { // ...
}
function useFavoriteFolder(currentFolderData) { // ...
}
function useHiddenFolders() { // ...
}
function useCreateFolder(openFolder) { // ...
