浅谈Vue3.0新版API之composition-api入坑指南
25 浏览量
2020-11-21
03:16:06
上传
评论
收藏 68KB PDF 举报
浅谈浅谈Vue3.0新版新版API之之composition-api入坑指南入坑指南
关于关于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++
评论0