关于VUE3.0
关于VUE3.0关于VUE3.0由于vue3.0语法跟vue2.x的语法几乎是完全兼容的，本文主要介绍了如何使用composition-api，主要分以下几个方面来讲

使用vite体验vue3.0

composition-api解决了什么问题

语法糖介绍
使用vite体验vue3.0composition-api解决了什么问题语法糖介绍vite的安装使用
vite的安装使用vite的安装使用vite仓库地址 https://github.com/vuejs/vite 上面有详细的安装使用教程，按照步骤安装即可https://github.com/vuejs/vitecomposition-api解决了什么问题
composition-api解决了什么问题composition-api解决了什么问题使用传统的option配置方法写组件的时候问题，随着业务复杂度越来越高，代码量会不断的加大；由于相关业务的代码需要遵循option的配置写到特定的区域，导致后续维护非常的复杂，同时代码可复用性不高，而composition-api就是为了解决这个问题而生的
语法糖介绍
语法糖介绍compositon-api提供了一下几个函数

reactive

watchEffect

computed

ref

toRefs

生命周期的hooks
reactivewatchEffectcomputedreftoRefs生命周期的hooksreactive

import { reactive, computed } from 'vue'

export default {

setup() {

const state = reactive({

count: 0

})



function increment() {

state.count++

}



return {

state,

increment

}

}
}


import { reactive, computed } from 'vue'

export default {

setup() {

const state = reactive({

count: 0

})



function increment() {

state.count++

}



return {

state,

increment

}

}
}

Reactive 相当于当前的 Vue.observable () API，经过reactive处理后的函数能变成响应式的数据，类似于option api里面的data属性的值watchEffect

import { reactive, computed, 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)

})

return {

state,

increment

}

}
}


import { reactive, computed, 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)

})

return {

state,

increment

}

}
}

Vue 中检测状态变化的方法，我们可以在渲染期间使用它。 由于依赖关系跟踪，当反应状态发生变化时，视图会自动更新。 在 DOM 中呈现某些内容被认为是一种“副作用” : 我们的程序在程序本身(DOM)之外修改状态。 要应用并自动重新应用基于反应状态的副作用，我们可以使用 watchEffect APIcomputed

import { reactive, computed } from 'vue'

export default {

setup() {

const state = reactive({

count: 0

})



const double = computed(() => state.count * 2)



function increment() {

state.count++

}



return {

state,

increment

}

}
}


import { reactive, computed } from 'vue'

export default {

setup() {

const state = reactive({

count: 0

})



const double = computed(() => state.count * 2)



function increment() {

state.count++

}



return {

state,

increment

}

}
}

有时我们需要依赖于其他状态的状态——在 Vue 中，这是通过计算属性来处理的。 要直接创建一个计算值，我们可以使用computed APIref
上面计算属性返回计算结果是什么？ 如果我们猜测一下内部是如何实现 computed 的，我们可能会得出这样的结论
function computed(getter) {
let value
watchEffect(() => {

value = getter()
})
return value
}

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
}


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


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的值，既即可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

}

}
}
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) { // ...
}


export default {
setup() { // ...
}
}

function useCurrentFolderData(networkState) { // ...
}

function useFolderNavigation({ networkState, currentFolderData }) { // ...
}

function useFavoriteFolder(currentFolderData) { // ...
}

function useHiddenFolders() { // ...
}

function useCreateFolder(openFolder) { // ...
}

当我们哪个功能需要再其他组件被复用的时候，直接把相关的方法提取出去，然后再引用进来就可以了可以看出composition api的面向人群主要是经常写轮子或者框架的开发者，因为他更灵活，可以写出高内聚、低耦合的代码使用vue3的过程中也不是一定要用composition api的，如果业务不是很复杂使用option api也是没什么问题的。