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

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

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

上文中,我们已经了解普通响应数据的绑定了。但是,那只是普通数据,我们在实际开发中,用到的对象数据是最多的。这一讲,我们就来讲讲响应对象数据的绑定。

开干。

编辑 src/views/About.vue 文件

编写代码如下:

<template>
  <router-link to="/">点这里去首页</router-link>
  <hr>
  <dl>
    <dt>{{state.name}}</dt>
    <dd>性别:{{state.sex}}</dd>
    <dd>地址:{{state.address}}</dd>
  </dl>
  <button @click="addressChange">更新地址</button>
</template>
<script>
// reactive 是 vue 3.0 的一个重大变化,其作用为创建响应式的对象或数组
import { reactive } from 'vue'
// 导出依然是个对象,不过对象中只有一个 setup 函数
export default {
  setup () {
    // 定义一个 state 的响应式对象数据,并赋值
    const state = reactive({
      name: 'FungLeo',
      sex: 'boy',
      address: '上海'
    })
    console.log(state)
    // 定义一个函数,修改 state 的值。
    const addressChange = () => {
      state.address += '浦东'
    }
    // 导出一些内容给上面的模板区域使用
    return {
      state,
      addressChange
    }
  }
}
</script>

代码差不多,我们来看下效果:

划重点

在上一讲中,我们使用的是 ref 来绑定响应的值,这里,我们需要的是 reactive

reactiveref 的区别就是,reactive 是处理对象或者数组的。

我们在代码中,使用了 reactive 来处理 state 这个对象。我们来打印一下,可以看到是如下图的内容。

这里面的重点是 Proxy 代理。这里就要说到,vue 3.0vue 2.0 的一个重大区别了,就是采用了 ES2015Proxy 来代替 Object.defineProperty。结果是功能更强大,同时性能更优秀。更多的内容,可以自己找相关的资料来详细了解。

好的,有关普通数据和对象数组数据的响应式绑定就说完了。但是看到这里,各位看官要问,原来的各种生命周期钩子哪里去了?

别着急,下一讲,我们来说道说道。


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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Shell 命令行获取本机IP,grep的练习

    Shell 命令行获取本机IP,grep的练习 在 mac 下面输入 ifconfig 或者在 linux 下面输入 ip a 就可以得到我们的网卡信息。不过通...

    FungLeo
  • vue3.0 Composition API 上手初体验 用路由循环,做个导航菜单

    通过前文的讲述,我已经基本讲清楚了 vue 3.0 的新特性,以及开发使用方法。只是演示 Demo 搞了好几个页面,只能输入地址进行跳转让我不爽,于是,我给我的...

    FungLeo
  • chrome 浏览器 FungLeo 常用插件汇总

    默认情况下 chrome 浏览器安装完成后,没有集成什么插件,或者有什么特殊功能,所以很多国人都认为它并不好用。事实并非如此,chrome 浏览器把选择权交给了...

    FungLeo
  • K8S集群模式下fluent-bit日志收集方案设计和实践

    「随着 K8s 不断更新迭代,使用 K8s 日志系统建设的开发者,逐渐遇到了各种复杂的问题和挑战。本篇文章中结合作者使用经验,分析和设计 K8s 日志收集实践过...

    用户5166556
  • Android高级动画(4)完结篇目录回顾封装库总结

    Android高级动画(1)http://www.jianshu.com/p/48554844a2db Android高级动画(2)http://www.ji...

    大公爵
  • QQ红包 1.0.7-xp框架

    Youngxj
  • 春节不打烊,镁客网带你看假期硬科技领域的精彩

    镁客网
  • D2-天猫超市Mobile Web的极致体验优化 - 学习笔记

    Web 和 Native 最大的差距不是调用底层接口的能力甚至不是性能,而在于各种细节,保证从设计到实现做到精细化。

    用户1515472
  • Day8.数据清洗

    数据预处理的过程包括数据清洗、数据集成、数据变换和规约。获取到数据后的第一步,是要进行数据清洗,主要是删除原始数据集中的无关数据,重复数据,筛选掉与挖掘主题无关...

    DataScience
  • 联盟形成的情境和可能性推理(CS AI)

    在多代理程序系统中,代理程序通常必须依靠其他代理程序来实现其目标,例如,当他们缺乏所需的资源或没有执行所需动作的能力时。因此代理商需要合作。然后,提出了一些问题...

    刘子蔚

扫码关注云+社区

领取腾讯云代金券