专栏首页地方网络工作室的专栏vue3.0 Composition API 上手初体验 函数组件的开发与使用

vue3.0 Composition API 上手初体验 函数组件的开发与使用

vue3.0 Composition API 上手初体验 函数组件的开发与使用

在上一节中,我们讨论了普通组件的开发与使用,其实相比较 vue 2.0 来说,差别并不大。

vue 3.0Composition API 带来的最大的特性,就是函数组件。通过函数组件,我们可以体会到 类似 react 编程的愉悦。这个章节,我们就来讨论一下。

vue 2.0 中,当多个页面或组件使用到相同逻辑的时候,我们会使用 mixin 来编写逻辑。其实我个人在使用 mixin 时,感觉还是很方便的,但是当项目组的其他成员开始使用 mixin 时,我就经常崩溃了。

原因很简单,当使用 mixin 时最大的问题就是——命名污染。比如,你在 mixin 中定义了一个 datalove,那么,在调用该 mixin 的页面,就不能使用 love 了,否则会覆盖掉。当然,方法名也是一样的。生命周期的话,还存在重复执行的问题。

这导致的结果就是,要小心意义的使用 mixin,甚至,在某些团队里面,就严禁使用 mixin 了。

好,废话不说,闲言少叙,开干。

创建函数式子组件 Position.js

# 进入项目文件夹
cd ~/Sites/myWork/demo/vue3-demo
# 创建 Position.js 文件
touch src/components/Position.js

创建好文件后,我们录入以下内容:

// 函数式组件, 该组件会返回鼠标在屏幕上的坐标值
// toFefs 是将 reactive 对象的所有 key 都转化为 ref 值
// 这样,在引入使用的组件中,就可以 用 const { x, y } = xx 来使用这些 key 对应的 value 了
import { onMounted, onUnmounted, reactive, toRefs } from 'vue'

// 这里导出,就不是对象,而是一个函数了。
export default () => {
  // 定义一个准备导出的对象数据
  const position = reactive({
    x: 0,
    y: 0
  })
  // 定义一个会改变数据的函数
  const update = page => {
    position.x = page.pageX
    position.y = page.pageY
  }
  // 使用生命周期,绑定和移除事件
  onMounted (() => {
    window.addEventListener('mousemove', update)
  })
  onUnmounted (() => {
    window.removeEventListener('mousemove', update)
  })
  // 将 reactive 对象 转化为 ref 响应式的值,并返回
  return toRefs(position)
}

这是一个简单的函数组件,其作用是返回鼠标在屏幕的坐标,通过 vue 提供的生命周期,我们来绑定和移除事件。

这里的重点是什么呢?在 vue2.0 当中,我们当然可以把一些函数方法给抽离出来,写自定义的工具函数,以达到逻辑的复用。但是,这些只是纯粹的 js 而已。而 vue3.0 提供的这种函数式风格的组件,可以非常方便的在函数中使用 vue 的特性,比如生命周期等等。

这样,我们就能写出更加灵活的功能了,而不仅仅只是业务逻辑代码的抽离。这一点,也是 vue3.0 带来的最大变革。

知识点

这里,我们用到了 toRefs 方法。这个也算是 vue3.0 给我们提供的一个语法糖函数了。通过 toRefs 函数,它可以将 reactive 对象,转化为普通对象,而它的每个 key 值,都会是如 ref 数据那样的格式,打印出来如下图所示:

可以看到,每个 key 都变成了对象,并且,都有一个 value 值。这样就变成了响应式的数据。

写一个调用函数子组件的父组件

我们创建一个 src/views/Father.vue 文件,并在路由中设置地址为 /father。录入以下内容:

<template>
  <div class="home">
    鼠标 x 轴 坐标 >>> <span class="red">{{ x }}</span> <br>
    鼠标 y 轴 坐标 >>> <span class="red">{{ y }}</span> <br>
  </div>
</template>
<script>
// 引用我们开发的子组件
import Position from '@/components/Position.js'
export default {
  setup () {
    // 引用函数子组件并展开它的值
    const { x, y } = Position()
    // 将他的值 return 出去
    return { x, y }
  }
}
</script>

代码非常简单,只要引用我们的函数子组件,执行并拿到结果,return 出去,或者参与其他的计算等等,都是可以的。别的没啥,看效果就行啦!

好的,通过本文的讲解,相信大家对于函数组件的开发,已经有一定的了解了。下面,只要我们去想想自己的应用场景,去构建自己的项目,就可以啦!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 打造前端 Deepin Linux 工作环境——安装 koala css 预编译工具(安装deb包的方法

    打造前端 Deepin Linux 工作环境——安装 koala css 预编译工具(安装deb包的方法) koala 是国人开发的一个 css 预编译工具,可...

    FungLeo
  • 用 python 写一个计算文件16进制头的命令行工具

    文件十六进制头信息是在我们编程中非常常用的一个信息,如果不安装软件,要计算文件的十六进制文件头信息还是比较麻烦的。

    FungLeo
  • 打造前端 Deepin Linux 工作环境——安装 nodejs 环境,git 版本管理

    打造前端 Deepin Linux 工作环境——安装 nodejs 环境,git 版本管理 好的,前面我们已经对系统进行了基本的设置,然后我们从这一篇博文开始,...

    FungLeo
  • fortran知识 | 代码错误(domain error)

    如图所示,提示为:domain error ? 这表示数学函数错误,如超出数学函数的定义域,负数开平方,分母为0等等;也有可能是浮点数错误,比如sqrt(4),...

    fem178
  • C语言程序可以没有main函数

    学习C语言的同学都知道,每个C程序要有一个main函数,程序从main函数开始执行,在main函数中结束。但事实上,C程序也可以没有main函数,或者说自己可以...

    用户5807183
  • Composer 版本约束表达式的使用

    overtrue
  • C语言main()主函数执行完毕后是否会再执行一段代码

    main() 主函数执行完毕后,是否可能会再执行一段代码?给出说明。 main主函数是所有程序必须具备的函数,是C/C++人员一接触代码就知道的函数,那么这个...

    用户5807183
  • 重新认识原型和原型链一

    之前分享过原型和原型链,那时候觉得理解的还行,最近重新理了一遍原型和原型链,发现当时理解的好粗浅。于是又重新学了一遍。可能这次学习的还是不到位,只是分享一些新的...

    wade
  • 前端-用 Vue 编写一个长按指令

    有没有想过创建一个按钮,按下一次就可以清除单次输入(或者持续按住可以清除所有输入)?

    grain先森
  • Android--AppBarLayout基本使用

    1.scroll--最基础的模式,并且设置其他模式必须|上它,否则不起效果 如果滚动到顶部再往上滑动的话,则显示Toolbar,只要往下滑动,则Toolbar...

    aruba

扫码关注云+社区

领取腾讯云代金券