专栏首页地方网络工作室的专栏vue3.0 Composition API 上手初体验 神奇的 setup 函数 (一) 响应数据的绑定

vue3.0 Composition API 上手初体验 神奇的 setup 函数 (一) 响应数据的绑定

vue3.0 Composition API 上手初体验 神奇的 setup 函数 (一) 响应数据的绑定

从网上大家对于 vue 3.0 的最大的变化,就是 Vue Composition API 的看法来说,两极分化比较严重。一种是认为这种写法实在太优秀了,很好,很喜欢。另外一种则认为变得没有以前那么清晰了,增加了学习成本。

那么我是怎么认为的呢?当然是第一种想法啊!你可知道,曾经我一度感觉到 vue 的语法实在是太过于变态,进而放弃使用 react 开发一年有余。后来因为来上海,入职的公司都是 vue 项目,故而我又开始了 vue 代码的编写。

但是,说实话,对于原来的 vue 的语法,我个人还是比较崩溃的。比如令人无法理解的 this,你别问,用就对了!

当然,还是有很多人喜欢 vue 的各种语法糖的,比如 v-for \ v-model 之类的。我个人表示这些确实降低了开发难度,但也确实变得更加费解。不过,语法糖这事儿,用着用着,就感觉,真爽。所谓嘴上不想要,身体还是很诚实的。

写一个简单的 setup 函数

我们编辑我们项目中的 src/views/Home.vue 文件,改成一下代码:

<template>
  <router-link to="/about">点这里去关于我们页面</router-link>
  <div class="home">
    这里是一个计数器 >>> <span class="red">{{count}}</span> <br>
    <button @click="countAdd">{{btnText}}</button>
  </div>
</template>

<script>
// ref 是 vue 3.0 的一个重大变化,其作用为创建响应式的值
import { ref } from 'vue'
// 导出依然是个对象,不过对象中只有一个 setup 函数
export default {
  setup () {
    // 定义一个不需要改变的数据
    const btnText = '点这个按钮上面的数字会变'
    // 定义一个 count 的响应式数据,并赋值为 0
    const count = ref(0)
    // 定义一个函数,修改 count 的值。
    const countAdd = () => {
      count.value++
    }
    // 导出一些内容给上面的模板区域使用
    return {
      btnText,
      count,
      countAdd
    }
  }
}
</script>
<style lang="scss">
.home {
  line-height: 2;
  .red {
    color: red;
  }
}
</style>

我们把项目跑起来看看结果,如下图所示:

当然,点击按钮,数字肯定是会相加的。这里就不截图了。

划重点

首先,我们的组件不用写一堆东西了,只需要一个 setup 函数即可。

这样做得好处就是,我们可以把很多零碎的东西拆成公共组件,然后交给其他组件去调用。我写 vue 有一个痛苦的点就是很多的东西我想抽离成组件,但是一拆,就得有 data (), methods 等等一堆。因此,有时候就偷懒,懒得拆了。

现在好了,可以一个函数就是一个组件,多方便啊!

其次,在 setup 函数中 return 出去的东西,可以在模板区域直接使用,也不必理会 this 这个神奇的东西。

然后就是 ref 这个函数,我们可以从 vue 中引入它,它传入一个值作为参数,返回一个基于该值的 响应式 Ref 对象,该对象中的值一旦被改变和访问,都会被跟踪到,通过修改 count.value 的值,可以触发模板的重新渲染,显示最新的值。

我们在控制台打印 count,如下图,我们可以看到它的结构,如下图所示:

vue 3.0 封装得很好,我们在模板区域,只要使用 count 就可以显示它的值了,不需要使用 count.value。当然,我们修改这个值,还是需要在 js 中使用 count.value 的。

好,消化一下,下一讲,我们来说说如何搞一个响应式的对象数据。


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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 修复 iPhone X H5 底部安全区域定位按钮下内容穿透 BUG

    今日,开发了一个 h5 项目,其中有部分页面使用了底部按钮,采用的是相对于浏览器窗口定位的样式制作的。

    FungLeo
  • vue3.0 Composition API 上手初体验 神奇的 setup 函数 (四) 计算属性 computed

    上一讲中,我们讲解了 vue 3.0 的生命周期,我相信大家已经了然了。在 vue 中,计算属性 computed 是非常常用的。那么,在 vue 3.0 中,...

    FungLeo
  • 【转载】vue 3.x 如何有惊无险地快速入门 —— 一文扫遍 vue2 与 3 的差异点

    虽然 vue2 到 vue3 的实现大改,但在用法上变化基本不大,比较明显的一个变化就是添加了 setup(){} 函数了,几乎所有的配置变成了以函数的方式进行...

    FungLeo
  • 在线文档预览方案-office web apps

      最近在做项目时,要在手机端实现在线文档预览的功能。于是百度了一下实现方案,大致是将文档转换成pdf,然后在通过插件实现预览。这些方案没有具体实现代码,也没有...

    用户1168362
  • 推荐 MySQL 常用函数

    来一个实际案例,有可能会记的更清楚一点, 例在MySQL统计一下,都有那些IP连到MySQL内部,及每个IP有多个连接

    wubx
  • 中国有哪些不错的开源软件产品?

    在知乎上,有个问题问“中国有什么拿得出手的开源软件产品(在 GitHub 等社区受欢迎度较好的)?”

    Rocky0429
  • php中三种数组简介及应用实例

    /* * 数值数组:数值数组存储的每个元素都带有一个数字 ID 键。 * */ //var_dump() var_export() print_r()三个函...

    闵开慧
  • ceph分布式存储-集群容量评估

    cpu型号: Intel(R) Xeon(R) CPU E5-2630 v4 @ 2.20GHz cpu核数: 40 硬盘: hdd

    Lucien168
  • Thymeleaf语法详解

    1.2 判断字符串是否为空 Thymeleaf 内置对象 注意语法: a.调用内置对象一定要用# b.大部分的内置对象都以 s 结尾 strings、n...

    用户4919348
  • 手把手教你深度学习目标检测框架 detectron2 环境搭建

    最近主要在搞深度学习方面的一些东西,所以相关的文章会多一些。当然有关于 Java 方面的文章也在积极的策划中。如果你有好的文章或者干货不妨投稿到 微信圈子 程...

    码农小胖哥

扫码关注云+社区

领取腾讯云代金券