上篇讲了构造响应式变量 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. 用python做时间序列预测四：*稳/非*稳时间序列

    上篇文章简单提到了应该用*稳时间序列做预测,本文将介绍具体概念和原因. Stationary Series *稳序列 *稳序列有三个基本标准: 1.序列的均值(mean)不应该是时间的函数(意思是不应 ...

  2. JUC并发—5.AQS源码分析一

    大纲 1.JUC中的Lock接口 2.如何实现具有阻塞或唤醒功能的锁 3.AQS抽象队列同步器的理解 4.基于AQS实现的ReentractLock 5.ReentractLock如何获取锁 6.AQ ...

  3. 百万架构师第四十三课：Nginx：Nginx 应用实战｜JavaGuide

    百万架构师系列文章阅读体验感更佳 原文链接:https://javaguide.net 公众号:不止极客 课程目标: Nginx 反向代理功能配置 Nginx 负载均衡实战 Nginx 动静分离配置 ...

  4. MySQL - [17] Oracle、SQLServer、MySQL数据类型对比

    题记部分 一.数据类型对比 对应关系 (1)整数类型 Oracle的NUMBER(*,0) 对应 SQL Server的INT 和 MySQL的INT Oracle的BIGINT 可能需要映射到SQL ...

  5. layui 自动触发radio和select

    layui对radio和select做了包装,正常用jquery选中后使用trigger不起作用. 那么,怎么让其自动触发呢? 对radio来说,必须在$选中后.next('.layui-form-r ...

  6. k8s报错Error: template: nvidia-device-plugin/templates/gfd.yml:22:19: executing "nvidia-device-plugin/templates/gfd.yml" at <.Subcharts.gfd>: nil pointer evaluating interface {}.gfd

    前言 在安装 kubernetes 插件 k8s-device-plugin时,报错: Error: template: nvidia-device-plugin/templates/gfd.yml: ...

  7. golang结构体判断是否为空

    前言 使用任何编程语言都会遇到判空的问题,那么Golang对于自定义的结构体类型如何判空呢? 其实空结构体可不是简单的与nil做比较哦.请看下面两种方法: package main import ( ...

  8. HTTP/1.1 优化

    避免发送 HTTP 请求 对于一些具有重复性的 HTTP 请求,比如每次请求得到的数据都一样的,我们可以把这对「请求-响应」的数据都缓存在本地,通过缓存技术减少请求次数. 客户端会把第一次请求以及响应 ...

  9. SpringBoot原理分析-1

    SpringBoot原理分析 作为一个javaer,和boot打交道是很常见的吧.熟悉boot的人都会知道,启动一个springboot应用,就是用鼠标点一下启动main方法,然后等着就行了.我们来看 ...

  10. Git--命令常用

    GITLab 命令 git remote add origin https://gitee.com/gtnotgod/Data-Quality-Management.git #增加了远程仓库 git ...