浅谈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 相关文章推荐
Jquery 表单验证类介绍与实例
Jun 09 Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 Javascript
JavaScript中两个字符串的匹配
Jun 08 Javascript
JavaScript实现的XML与JSON互转功能详解
Feb 16 Javascript
Javascript获取某个月的天数
May 30 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 Javascript
JS+CSS实现炫酷光感效果
Sep 05 Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 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代码
2008/04/09 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
php读取文件内容的方法汇总
2015/01/24 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
php实现往pdf中加数字签名操作示例【附源码下载】
2018/08/07 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
laravel Validator ajax返回错误信息的方法
2019/09/29 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
jquery中radio checked问题
2015/03/16 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
angular2+node.js express打包部署的实战
2017/07/27 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
介绍Python的Django框架中的QuerySets
2015/04/20 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
Django之模型层多表操作的实现
2019/01/08 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
python3 pillow模块实现简单验证码
2019/10/31 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
Python中Qslider控件实操详解
2021/02/20 Python
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
欢迎领导标语
2014/06/27 职场文书
普通党员对照检查材料
2014/09/24 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书