上篇讲了构造响应式变量 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. WPF DevExpress GridColumn ComboBox 显示选择内容的 TooTip

    实现显示当前选择的ComboBox中项的ToolTip信息: 1. 设置 GridColumn 的 CellTemplate 为 ComboBoxEdit , 然后自定义他的 ItemContaine ...

  2. Deepin 设置开机执行某sh文件

    背景 deepin系统上部署了Geoserver,但是每次开机后都得手动过去起,麻烦,故想着找个办法解决下 过程 在/etc/systemd/system目录下新建一个 geoserver.servi ...

  3. zabbix - [01] 概述

    参考:Zabbix教程(Zabbix监控系统精讲) 一.监控介绍 Cacti Cacti 是一套基于PHP.MySQL.SNMP以及RRD Tool开发的监测图形分析工具,Cacti 是使用轮询的方式 ...

  4. Linux - lvm逻辑卷的操作

    执行 lsblk如下所示: [root@idc-poc-60 ~]# lsblk NAME MAJ:MIN RM SIZE RO TYPE MOUNTPOINT sr0 11:0 1 3.7G 0 r ...

  5. surpac 中如何删除点

    找到显示的编号 输入线窜线段编号

  6. Linux下yum安装mysql 遇到的问题Can't open and lock privilege tables: Table 'mysql.user' doesn't exist 错误

    今天在linux下安装mysql时 执行service mysqld start时, mysql总是启动失败 后来查看mysql日志:/var/log/mysqld.log,发现有个Can't ope ...

  7. osharp多租户方案

    osharp多租户方案 租户信息 using System; using System.Collections.Generic; using System.Linq; using System.Tex ...

  8. 【Bug记录】node-sass安装失败解决方案

    node-sass 安装失败解决办法 前言 很多小伙伴在安装 node-sass 的时候都失败了,主要的原因是 node 版本和项目依赖的 node-sass 版本不匹配. 解决方案 解决方案:把项目 ...

  9. docker login harbor x509: certificate signed by unknown authority

    前言 docker login harbor x509: certificate signed by unknown authority 解决 打开 /etc/docker/daemon.json,如 ...

  10. centos7 挂载未分配的硬盘空间 （测试可用）

    =============================================== 2019/7/28_第1次修改                       ccb_warlock == ...