对于VUE3.0
因为vue3.0语法跟vue2.x的语法简直是齐全兼容的，本文次要介绍了如何应用composition-api，次要分以下几个方面来讲
- 应用vite体验vue3.0
- composition-api解决了什么问题
-
语法糖介绍
vite的装置应用
vite仓库地址 https://github.com/vuejs/vite 下面有具体的装置应用教程，依照步骤装置即可。
composition-api解决了什么问题
应用传统的option配置办法写组件的时候问题，随着业务复杂度越来越高，代码量会一直的加大；因为相干业务的代码须要遵循option的配置写到特定的区域，导致后续保护十分的简单，同时代码可复用性不高，而composition-api就是为了解决这个问题而生的
语法糖介绍
compositon-api提供了一下几个函数
- reactive
- watchEffect
- computed
- ref
- toRefs
-
生命周期的hooks
reactive
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
}
}
}Vue 中检测状态变动的办法，咱们能够在渲染期间应用它。 因为依赖关系跟踪，当反馈状态发生变化时，视图会自动更新。 在 DOM 中出现某些内容被认为是一种“副作用” : 咱们的程序在程序自身(DOM)之外批改状态。 要利用并主动从新利用基于反馈状态的副作用，咱们能够应用 watchEffect API
computed
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 API
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) { // ...
}当咱们哪个性能须要再其余组件被复用的时候，间接把相干的办法提取进来，而后再援用进来就能够了
能够看出composition api的面向人群次要是常常写轮子或者框架的开发者，因为他更灵便，能够写出高内聚、低耦合的代码
应用vue3的过程中也不是肯定要用composition api的，如果业务不是很简单应用option api也是没什么问题的。
发表回复