浅谈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 相关文章推荐
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
javascript数据类型示例分享
Jan 19 Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
JS简单获取当前日期和农历日期的方法
Apr 17 Javascript
jquery仿微信聊天界面
May 06 jQuery
微信小程序中setInterval的使用方法
Sep 29 Javascript
尝试自己动手用react来写一个分页组件(小结)
Feb 09 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
vue中轮训器的使用
Jan 27 Javascript
ES6如何用一句代码实现函数的柯里化
Jan 18 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
解析php中heredoc的使用方法
2013/06/17 PHP
php制作文本式留言板
2015/03/18 PHP
php猴子选大王问题解决方法
2015/05/12 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
php简单统计中文个数的方法
2016/09/30 PHP
php 浮点数比较方法详解
2017/05/05 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
ajax无刷新动态调用股票信息(改良版)
2008/11/01 Javascript
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
js 字符串转化成数字的代码
2011/06/29 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
2016/09/19 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
JavaScript实现表单注册、表单验证、运算符功能
2018/10/15 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
python常用排序算法的实现代码
2019/11/08 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
如何利用python正则表达式匹配版本信息
2020/12/09 Python
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
试述DBMS的主要功能
2016/11/13 面试题
文明风采获奖感言
2014/02/18 职场文书
内衣营销方案
2014/03/15 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android