浅谈Vue3.0新版API之composition-api入坑指南

更新时间：2020年04月30日 16:42:32 作者：请叫我宋某某

这篇文章主要介绍了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++
   }

   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也是没什么问题的。

到此这篇关于浅谈Vue3.0新版API之composition-api入坑指南的文章就介绍到这了,更多相关Vue3.0 composition-api 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

关于vite.config.ts文件的配置方式
这篇文章主要介绍了关于vite.config.ts文件的配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue中的mescroll搜索运用及各种填坑处理
这篇文章主要介绍了vue中的mescroll搜索运用及各种填坑处理，文中通过代码给大家讲解了mescroll vue使用，感兴趣的朋友跟随小编一起看看吧
2019-10-10
简单学习5种处理Vue.js异常的方法
这篇文章主要介绍了简单学习5种处理Vue.js异常的方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下
2019-06-06
Vue3常用的通讯方式总结与实例代码
Vue.js中一个很重要的知识点是组件通信,不管是业务类的开发还是组件库开发,都有各自的通讯方法,下面这篇文章主要给大家介绍了关于Vue3常用的通讯方式的相关资料,需要的朋友可以参考下
2022-05-05
一文详解Vue中的虚拟DOM与Diff算法
vue中的diff算法时常是面试过程中的考点,本文将为大家讲解何为diff以及diff算法的实现过程,那么在了解diff之前,我们需要先了解虚拟DOM是什么,需要的朋友可以参考下
2024-02-02
vue+element实现表格新增、编辑、删除功能
这篇文章主要为大家详细介绍了vue+element实现表格新增、编辑、删除功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-05-05
VUE开发分布式医疗挂号系统后台管理页面步骤
本文从整体上介绍Vue框架的开发流程，结合具体的案例，使用Vue框架调用具体的后端接口，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-04-04
elementui源码学习仿写一个el-tooltip示例
本篇文章记录仿写一个el-tooltip组件细节，从而有助于大家更好理解饿了么ui对应组件具体工作细节，本文是elementui源码学习仿写系列的又一篇文章，后续空闲了会不断更新并仿写其他组件
2023-07-07
vue进行下载与处理二进制流文件的方法详解
这篇文章主要为大家详细介绍了vue如何实现将后端返回的二进制流进行处理并实现下载,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2023-12-12
vuejs2.0运用原生js实现简单的拖拽元素功能示例
本篇文章主要介绍了vuejs2.0运用原生js实现简单的拖拽元素功能示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-02-02