Vue3.0新版API之composition-api入坑指南
2020-04-30 16:39
851 查看
## 关于VUE3.0
由于vue3.0语法跟vue2.x的语法几乎是完全兼容的,本文主要介绍了如何使用`composition-api`,主要分以下几个方面来讲
- 使用vite体验vue3.0
- composition-api解决了什么问题
- 语法糖介绍
### vite的安装使用
vite仓库地址 https://github.com/vuejs/vite 上面有详细的安装使用教程,按照步骤安装即可
### composition-api解决了什么问题
1. 使用传统的option配置方法写组件的时候问题,随着业务复杂度越来越高,代码量会不断的加大;由于相关业务的代码需要遵循option的配置写到特定的区域,导致后续维护非常的复杂,同时代码可复用性不高,而composition-api就是为了解决这个问题而生的
### 语法糖介绍
compositon-api提供了一下几个函数
- reactive
- watchEffect
- computed
- ref
- toRefs
- 生命周期的hooks
#### reactive
```javascript
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
```javascript
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
```javascript
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 的,我们可能会得出这样的结论
```javascript
function computed(getter) {
let value
watchEffect(() => {
value = getter()
})
return value
}
```
但是我们知道这是行不通的: 如果 value 是一个类似 number 的基本类型,那么一旦返回,它与 `computed` 内部的更新逻辑的连接就会丢失。 这是因为 JavaScript 基本类型是按值传递的,而不是按引用传递的
当一个值作为属性分配给一个对象时,同样的问题也会发生。 如果被赋为属性或从函数返回时,反应值不能保持其响应性,那么它就没有多大用处。 为了确保我们总是可以读取计算的最新值,我们需要将实际值包装在一个对象中,然后返回该对象
```javascript
function computed(getter) {
const ref = {
value: null
}
watchEffect(() => {
ref.value = getter()
})
return ref
}
```
所以要拿到ref与computed的值应该是那返回值下面的value
```javascript
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的值,既`{{ count }} {{ double }}`即可
#### toRefs
toRefs API提供了一个方法可以把reactive的值处理为ref
#### 生命周期的hooks
方法与option api基本一致
```javascript
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如何组织代码
往往是把一个功能的所有状态、方法、都封装到一个函数里面,方便统一管理,如果你按照这种方式来写代码,那么代码的结构大致如下
```javascript
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也是没什么问题的。
结束,谢谢观看~~~~
相关文章推荐
- Windows Composition API 指南 - 认识 Composition API
- Android开发-API指南-常用Intent
- jQuery MiniUI 开发指南+API组件参考手册
- 2019新版布尔教育22部分PHP光速自学指南(最新版PHP学习课程合集包)
- (36)老版和新版API调用
- 【转】JAVA 8 日期/时间(Date Time)API指南
- 百度翻译新版API的VB实现代码
- 新版新浪微博api使用问题及相关解决办法
- 百度Android定位API使用指南
- 详解ES6 Fetch API HTTP请求实用指南
- (转)RESTful API设计指南
- REST API 最佳入门指南
- Visual Studio 发布新版API智能提示
- Linux 音频 API 指南
- ASP.NET Core Web API 最佳实践指南
- http://www.ruanyifeng.com/blog/2014/05/restful_api.html RESTful API 设计指南
- SUN韩F注册指南[新版]
- 用 JSON 构建 API 的标准指南
- Android开发-API指南-<meta-data>