浅谈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 相关文章推荐
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
仿百度输入框智能提示的js代码
Aug 22 Javascript
jQuery使用ajaxSubmit()提交表单示例
Apr 04 Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
May 03 Javascript
全面了解构造函数继承关键apply call
Jul 26 Javascript
Vue.directive自定义指令的使用详解
Mar 10 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
Angular数据绑定机制原理
Apr 17 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开源建站平台小结
2010/04/22 PHP
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
smarty基础之拼接字符串的详解
2013/06/18 PHP
mac下安装nginx和php
2013/11/04 PHP
PHP实现的进度条效果详解
2016/05/03 PHP
js计数器代码
2006/11/04 Javascript
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
在Javascript中处理数组之toSource()方法的使用
2015/06/09 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
vue实现弹幕功能
2019/10/25 Javascript
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
wxPython中listbox用法实例详解
2015/06/01 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
计算机毕业生自荐信范文
2014/03/23 职场文书
医学生自我鉴定范文
2014/03/26 职场文书
户外活动总结范文
2014/04/30 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
简爱读书笔记
2015/06/26 职场文书