浅谈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继承的实现
Oct 24 Javascript
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
Jul 08 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 Javascript
原生js更改css样式的两种方式
Mar 15 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
打造通用的匀速运动框架(实例讲解)
Oct 17 Javascript
微信小程序提交form操作示例
Dec 30 Javascript
如何在微信小程序中存setStorage
Dec 13 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 Javascript
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 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
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
jquery中.add()的使用分析
2013/04/26 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
jQuery事件详解
2017/02/23 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
vue事件修饰符和按键修饰符用法总结
2017/07/25 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
利用Python抓取行政区划码的方法
2016/11/28 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
Python telnet登陆功能实现代码
2020/04/16 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
售后前台接待岗位职责
2015/04/03 职场文书
在校证明模板
2015/06/17 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书