上篇讲了构造响应式变量 ref 和 reactive 函数, 其中 ref 针对基础类型, reactive 针对引用类型. 而 toRefs 可以将响应式变量进行结构后, 仍然具备响应式. 而本篇继续对其常用 API 进行扩展.

toRefs 的局限性

首先是关于 toRefs 在结构 reactive 对象时, 如果获取不到的情况, 就直接会报错啦.

<!DOCTYPE html>

<html lang="en">

<head>

  <title>toRefs 解构不存在的数据</title>

  <script src="https://unpkg.com/vue@3"></script>

</head>

<body>

  <div id="root"></div>

  <script>

    const app = Vue.createApp({

      template: `<div>{{name}}</div>`,

      setup(props, context) {

        const { reactive, toRefs } = Vue

        let data = reactive({ name: 'youge'})

        // 当解构 toRefs 对象中不存在的值时, 就会报错啦

        const { age } = toRefs(data)

        setTimeout(() => {

          age.value = 26

        }, 2000);

        return { name, age }

      }

    })

    const vm = app.mount('#root')

  </script>

</body>

</html>

toRef

它就可以给一个值, 让其不报错, 但是呢我感觉很鸡肋, 还是建议前后端传值要约定好.

<!DOCTYPE html>

<html lang="en">

<head>

  <title>toRef 解构不存在的数据时给默认值</title>

  <script src="https://unpkg.com/vue@3"></script>

</head>

<body>

  <div id="root"></div>

  <script>

    const app = Vue.createApp({

      template: `<div>{{name}}: {{age}}</div>`,

      setup(props, context) {

        const { reactive, toRef } = Vue

        let data = reactive({ name: 'youge'})

        // 当解构 toRef 对象中不存在的值时, 可以给个默认值

        const age = toRef(data, '18')

        const { name } = data

        setTimeout(() => {

          age.value = 26

        }, 2000);

        return { name, age }

      }

    })

    const vm = app.mount('#root')

  </script>

</body>

</html>

因此这个 toRef 总感觉怪怪的, 就再说, 也有应用场景吧, 视情况而定吧.

context

它是一个上下文的概念, 里面有三个东西: attrs, slots 和 emit

首先来看 attrs. 就父组件传递过来的数据, 当子组件不通过 props 接收数据时, 其会默认挂载到 attrs 上.

<!DOCTYPE html>

<html lang="en">

<head>

  <title>context-attrs</title>

  <script src="https://unpkg.com/vue@3"></script>

</head>

<body>

  <div id="root"></div>

  <script>

    const app = Vue.createApp({

      template: `<son name="youge">father</son>`,

    })

    app.component('son', {

      template: `<div @click="handleClick">son</div>`,

      setup (props, context) {

        const { h } = Vue

        const { attrs, slots, emit }  = context

        // None-Props 会存在 context 的 attrs 中哦

        console.log(attrs.name)

        console.log(slots)

        // 通过 h 函数生成虚拟 dom 就可以直接展示啦

        // return () => h('div', {}, 'houyaya')

        // 直接展示父组件传来的内容, 也可通过 slots

        // return () => h('div', {}, slots.default())

        // emit 也是可以替换掉原来的 $emit 方法的啦

        function handleClick () {

          emit('change')

        }

        return { handleClick }

      }

    })

    const vm = app.mount('#root')

  </script>

</body>

</html>

所以结论就是 Composition API 是基本可以替换和完善掉原来的一些类似 $emit呀, slots, attrs 等的功能. 使其应用场景会更加广泛和具有低耦合, 高扩展性的特点, 还是非常好用的.

小结

  • vue3 的响应式变量是通过 ref, reactive, toRef 来封装的, 底层是 Proxy, ref 基于 reactive
  • ref 可将基础数据类型变成响应式, 如 number, string, boolean, undefined, null 等
  • reactive 可将引用数据类型变为响应式 (基础类型也行哈), 如 array, object, functions 等
  • toRefs 是在解构 reactive 的时候, 将其里面的 key 对应的值变成响应式变量
  • toRef 是对 toRefs 的一种当 key 不存在时可以给一个默认防止报错, 但不建议使用, 前后端应最好约定好接口
  • setup 函数中的 context 有三个东西 attrs, slots, emit 就基本可以替代掉原来的 $attrs 等各种操作

vue3 基础-API-响应式 toRef, context的更多相关文章

  1. Vue3中的响应式api

    一.setup文件的认识 特点1:script 中间的内容就是一个对象 特点2:script 在第一层 定义的方法 或者 变量 => 就是这个对象 属性  => 顶层的绑定回被暴露给模板( ...

  2. Vue3中的响应式对象Reactive源码分析

    Vue3中的响应式对象Reactive源码分析 ReactiveEffect.js 中的 trackEffects函数 及 ReactiveEffect类 在Ref随笔中已经介绍,在本文中不做赘述 本 ...

  3. Bootstrap<基础十> 响应式实用工具

    Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发.这些可以通过媒体查询结合大型.小型和中型设备,实现内容对设备的显示和隐藏. 需要谨慎使用这些工具,避免在同一个站点创建完全不同 ...

  4. WebFlux基础之响应式编程

    上篇文章,我们简单的了解了WebFlux的一些基础与背景,并通过示例来写了一个demo.我们知道WebFlux是响应式的web框架,其特点之一就是可以通过函数式编程方式配置route.另外究竟什么是响 ...

  5. Vue.js 源码分析(四) 基础篇 响应式原理 data属性

    官网对data属性的介绍如下: 意思就是:data保存着Vue实例里用到的数据,Vue会修改data里的每个属性的访问控制器属性,当访问每个属性时会访问对应的get方法,修改属性时会执行对应的set方 ...

  6. vue3剖析：响应式原理——effect

    响应式原理 源码目录:https://github.com/vuejs/vue-next/tree/master/packages/reactivity 模块 ref: reactive: compu ...

  7. Java9第四篇-Reactive Stream API响应式编程

    我计划在后续的一段时间内,写一系列关于java 9的文章,虽然java 9 不像Java 8或者Java 11那样的核心java版本,但是还是有很多的特性值得关注.期待您能关注我,我将把java 9 ...

  8. Bootstrap3基础 img-responsive 响应式图片

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  9. Vue3.0数据响应式原理

    在vue2版本中响应式使用的是ES5对象的操作,通过遍历对象Object.defineProperty属性值的变化,实现监听数据 在3.0中使用的ES6版本的Proxy代理对象方式来实现数据的监听,省 ...

  10. Bootstrap3基础 table-responsive 响应式表格

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

随机推荐

  1. Android高版本Service在后台一分钟被杀死

    最近公司出现了一个Bug,Service在后台写log时候一分钟左右被杀死,或者运行一会就被杀死了,上网搜了一下原来是Android高版本为了保护电量,流量什么的,会在后台杀死这些Service,现在 ...

  2. 飞牛fnOs安装autman奥特曼机器人喂饭教程

    前言 简介:autman奥特曼机器人是干什么的? autMan是机器人牵引的扩展性极强的一站式解决方案 原生支持对接qq框架.qq频道.微信框架(酷V西瓜可爱猫千寻鲲鹏).内置微信.微信客服.公众号. ...

  3. 洛谷P4390 [BalkanOI2007] Mokia 摩基亚 题解

    题目传送门. 想必 我的另外一篇题解 已经把这道题的思路说的很清楚了,但是那道题是把所有的修改全部告诉你,然后再一个一个问你矩阵和,但是这道题他是修改中夹着询问,但是没有关系,我们照样可做. 考虑将所 ...

  4. 代码托管平台对比分析：Gitee与GitLab

    一.Gitee:本土化服务的深度实践者 Gitee凭借对中国开发者需求的精准洞察,提供了多项针对性优化功能,尤其适合国内团队: 高速稳定的访问体验 服务器均部署于国内,代码拉取.推送及CI/CD流程的 ...

  5. CCRC软件开发评审-材料应该怎么准备

    1. 什么是CCRC软件开发评审 软件安全开发资质认证是对软件开发方的基本资格.管理能力.技术能力和软件安全过程能力等方面进行评价全软件开发服务资质级别是衡量服务提供方的软件安全开发服务资格和能力的尺 ...

  6. How to use the shell, terminal and the advanced tools

    How to use the shell, terminal and the advanced tools Introduction ‍ Why use English instead of Chin ...

  7. tsconfig.json报错问题

    tsconfig.json报错问题 前言 创建 tsconfig.json 配置文件时,VS Code 会自动检测当前项目当中是否有ts文件,若没有则报错,提示用户需要创建一个ts文件后,再去使用ty ...

  8. Go 1.20更新了那些内容

    PGO的引入 Go 1.20 发布了配置文件引导优化(PGO)的预览版,使编译器能够根据运行时配置文件信息,执行应用程序和工作负载的特定性优化.提供要构建的配置文件,使编译器能够将应用程序的速度提高大 ...

  9. 人工智能-A*算法-八数码问题

    一,A*算法设计思想 A*算法(A-star)是一种寻路算法,主要用于游戏.机器人等领域. 它的设计思想是将最短路径搜索问题转化为一个优化问题,通过计算每个节点的评分(f(n) = g(n) + h( ...

  10. Django项目如何配置日志文件信息

    1.以dict的方式配置在settings.py中 # 日志文件简单配置 ''' LOGGING = { "version": 1, "disable_existing_ ...