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


Posted in Javascript onApril 30, 2020

关于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 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Javascript 不能释放内存.
Sep 07 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 Javascript
js实现点击图片改变页面背景图的方法
Feb 28 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
Nov 07 Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 Javascript
数组Array的一些方法(总结)
Feb 17 Javascript
ajax跨域访问遇到的问题及解决方案
May 23 Javascript
js滚轮事件 js自定义滚动条的实现
Jan 18 Javascript
写一个Vue loading 插件
Nov 09 Javascript
JavaScript变量Dom对象的所有属性
Apr 30 #Javascript
vue项目中使用bpmn为节点添加颜色的方法
Apr 30 #Javascript
VSCode搭建Vue项目的方法
Apr 30 #Javascript
jQuery实现的解析本地 XML 文档操作示例
Apr 30 #jQuery
vue使用map代替Aarry数组循环遍历的方法
Apr 30 #Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 #jQuery
JS XMLHttpRequest原理与使用方法深入详解
Apr 30 #Javascript
You might like
Parse正式发布开源PHP SDK
2014/08/11 PHP
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python找出9个连续的空闲端口
2016/02/01 Python
python 回调函数和回调方法的实现分析
2016/03/23 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
解决Django中调用keras的模型出现的问题
2019/08/07 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
详解django使用include无法跳转的解决方法
2020/03/19 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
外企C语言笔试题
2013/11/10 面试题
婚前协议书怎么写
2014/04/15 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers
JavaScript实现两个数组的交集
2022/03/25 Javascript