Vue笔记10-其它Composition API

shallowReactive与shallowRef

shallow：浅的，和deep相反
shallowReactive：只处理对象最外层属性的响应式
shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理
如果有一个对象数据，结构比较深，但是变化只对外层属性变化：使用shallowReactive
如果有一个对象数据，后序不会修改对象中的属性，而是生成新的对象来替换：使用shallowRef

<template>
  <h4>当前的x.y值是：{{ x.y }}</h4>
  <button @click="x={y:888}">点我替换x</button>
  <button @click="x.y++">点我x.y++</button>
  <hr>
  <h4>{{ person }}</h4>
  <h2>姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <h2>薪资：{{ person.job.j1.salary }}K</h2>
  <button @click="person.name+='~'">修改姓名</button>
  <button @click="person.age++">增长年龄</button>
  <button @click="person.job.j1.salary++">涨薪</button>
</template>

<script>
import {shallowReactive, shallowRef} from 'vue'

export default {
  name: 'App',
  setup() {
    //数据
    let person = shallowReactive({// 只考虑第一层数据的响应式，在修改salary的时候，是修改不成功的
      name: '张三',
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    })
    let x = shallowRef({
      y: 0
    });
    console.log('******', x)

    //返回一个对象（常用）
    return {
      x,
      person
    }
  }
}
</script>

readonly与shallowReadonly

readonly：让一个响应式数据变成只读（深只读）
shallowReadonly：让一个响应式数据变成只读（浅只读）

<template>
  <h4>当前求和为：{{ sum }}</h4>
  <button @click="sum++">点我++</button>
  <hr>
  <h2>姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <h2>薪资：{{ person.job.j1.salary }}K</h2>
  <button @click="person.name+='~'">修改姓名</button>
  <button @click="person.age++">增长年龄</button>
  <button @click="person.job.j1.salary++">涨薪</button>
</template>

<script>
import {reactive, readonly, ref, shallowReadonly} from 'vue'

export default {
  name: 'App',
  setup() {
    //数据
    let sum = ref(0)
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    })

    person = readonly(person);// person里的任何东西都改不了
    person = shallowReadonly(person);// 浅层次的readonly，深层次的可以修改
    sum = readonly(sum);// sum改不了
    sum = shallowReadonly(sum);// sum改不了

    //返回一个对象（常用）
    return {
      sum,
      person
    }
  }
}
</script>

toRaw与markRaw

toRaw：将一个reactive生成的响应式对象转为普通对象，用于读取响应式对象对应的普通对象，对这个普通对象的操作，页面都不会更新。
markRaw：标记一个对象，使其永远不会成为响应式对象，当有些值没必要设置成响应式的时候，可以跳过响应式转换提高性能，例如复杂的第三方类库等。

<template>
  <h4>当前求和为：{{ sum }}</h4>
  <button @click="sum++">点我++</button>
  <hr>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>薪资：{{ job.j1.salary }}K</h2>
  <h3 v-show="person.car">座驾信息：{{ person.car }}</h3>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="job.j1.salary++">涨薪</button>
  <button @click="showRawPerson">输出最原始的person</button>
  <button @click="addCar">给人添加一台车</button>
  <button @click="person.car.name+='!'">换车名</button>
  <button @click="changePrice">换价格</button>
</template>

<script>
import {markRaw, reactive, ref, toRaw, toRefs} from 'vue'

export default {
  name: 'App',
  setup() {
    //数据
    let sum = ref(0)
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    });

    function showRawPerson() {
      const p = toRaw(person);
      p.age++;
      console.log(p);
    }

    function addCar() {
      let car = {name: '奔驰', price: 40};
      person.car = markRaw(car);
    }

    function changePrice() {
      person.car.price++;
      console.log(person.car.price);
    }

    //返回一个对象（常用）
    return {
      sum,
      person,
      ...toRefs(person),
      showRawPerson,
      addCar,
      changePrice
    }
  }
}
</script>

customRef

自定义ref，可以对ref包装的数据改动，显示的进行跟踪和触发更新。
写一个效果，写一个input和一个h3，在input里输入内容后，h3的内容等待1秒后展示。

<template>
  <input type="text" v-model="keyword">
  <h3>{{ keyword }}</h3>
</template>

<script>
import {customRef} from 'vue'

export default {
  name: 'App',
  setup() {
    // 自定义一个myRef
    function myRef(value, delay) {
      let timer;
      // 通过customRef去实现自定义
      return customRef((track, trigger) => {
        return {
          get() {
            console.log(`通过get方法读取${value}`);
            track();// 告诉Vue这个value值是需要被“追踪”的
            return value;
          },
          set(newValue) {
            clearTimeout(timer);
            timer = setTimeout(() => {
              value = newValue;
              console.log(`通过set方法设置${newValue}`);
              trigger();// 告诉Vue去更新界面
            }, delay);
          }
        }
      });
    }

    let keyword = myRef('hello', 1000);// 使用程序员自定义的ref
    return {
      keyword
    }
  }
}
</script>

provide与inject

实现祖先和后代的组件间通信，祖先组件通过provide将数据提供出去，后代组件通过inject注入数据。
App.vue（祖先组件）

<template>
  <div id="App">
    <h1>我是祖先组件</h1>
    <h2>{{ value }}</h2>
    <button @click="value+=1">点我加1</button>
    <Child></Child>
  </div>
</template>
<script>
import Child from "./components/Child.vue";
import {provide, ref} from "vue";

export default {
  name: 'App',
  components: {Child},
  setup() {
    let value = ref(1);
    provide('value', value);
    return {
      value
    }
  }
}
</script>
<style scoped>
#App {
  background-color: red;
  padding: 10px;
}
</style>

Child.vue（子组件）

<template>
  <div id="Child">
    <h1>我是子组件</h1>
    <GrandChild></GrandChild>
  </div>
</template>
<script>
import GrandChild from "./GrandChild.vue";

export default {
  name: "Child",
  components: {GrandChild}
}
</script>
<style scoped>
#Child {
  background-color: green;
  padding: 10px;
}
</style>

GrandChild.vue（孙组件）

<template>
  <div id="GrandChild">
    <h1>我是孙组件</h1>
    <h1>{{ value }}</h1>
  </div>
</template>
<script>
import {inject} from "vue";

export default {
  name: "GrandChild",
  setup() {
    let value = inject("value");
    return {
      value
    }
  }
}
</script>
<style scoped>
#GrandChild {
  background-color: yellow;
  padding: 10px;
}
</style>

响应式数据的判断

isRef：检查一个值是否是一个ref对象
isReactive：检查一个对象是否是由reactive创建的响应式代理
isReadonly：检查一个对象是否是由readonly创建的只读代理
isProxy：检查一个对象是否是由reactive或readonly方法创建的代理

<template>
  <div>

  </div>
</template>
<script>
import {isProxy, isReactive, isReadonly, isRef, reactive, readonly, ref} from "vue";

export default {
  name: 'App',
  setup() {
    let car = reactive({name:"奔驰",price:100});
    let sum = ref(0);
    let car2 = readonly(car);

    console.log(isRef(sum));
    console.log(isReactive(car));
    console.log(isReadonly(car2));
    console.log(isProxy(car));
    console.log(isProxy(sum));
  }
}
</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/782214.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

入门PHP就来我这（高级）13 ~ 图书添加功能

入门PHP就来我这（高级）13 ~ 图书添加功能

有胆量你就来跟着路老师卷起来&#xff01; -- 纯干货&#xff0c;技术知识分享 路老师给大家分享PHP语言的知识了&#xff0c;旨在想让大家入门PHP&#xff0c;并深入了解PHP语言。 今天给大家接着上篇文章编写图书添加功能。 1 添加页面 创建add.html页面样式&#xff0c;废…
阅读更多...
什么是Web3D交互展示？有什么优势？

什么是Web3D交互展示？有什么优势？

在智能互联网蓬勃发展的时代&#xff0c;传统的图片、文字及视频等展示手段因缺乏互动性&#xff0c;正逐渐在吸引用户注意力和提升宣传效果上显得力不从心。而Web3D交互展示技术的横空出世&#xff0c;则为众多品牌与企业开启了一扇全新的展示之门&#xff0c;让线上产品体验从…
阅读更多...
[240707] X-CMD v0.3.14: cb gh fjo zig 模块增强；新增 lsio 和 pixi 模块

[240707] X-CMD v0.3.14: cb gh fjo zig 模块增强；新增 lsio 和 pixi 模块

目录 X-CMD 发布 v0.3.14✨ advise&#xff1a;Bash 环境下自动补全时&#xff0c;提供命令的描述信息✨ cb:支持下载指定版本的附件资源✨ gh:支持下载指定版本的附件资源✨ fjo:支持下载指定版本的附件资源✨ zig&#xff1a;新增 pm 和 zon 子命令✨ lsio&#xff1a;用于查…
阅读更多...
排序 -- 手撕归并排序(递归和非递归写法)

排序 -- 手撕归并排序(递归和非递归写法)

一、基本思想 归并排序&#xff08;MERGE-SORT&#xff09;是建立在归并操作上的一种有效的排序算法,该算法是采用分治法&#xff08;Divide and Conquer&#xff09;的一个非常典型的应用。将已有序的子序列合并&#xff0c;得到完全有序的序列&#xff1b;即先使每个子序列有…
阅读更多...
手把手搭建微信机器人，帮你雇一个24小时在线的个人 AI 助理（上）

手把手搭建微信机器人，帮你雇一个24小时在线的个人 AI 助理（上）

上一篇&#xff0c;带领大家薅了一台腾讯云服务器&#xff1a;玩转云服务&#xff1a;手把手带你薅一台腾讯云服务器&#xff0c;公网 IP。 基于这台服务器&#xff0c;今天我们一起动手捏一个基于 LLM 的微信机器人。 0. 前置准备 除了自己常用的微信账号以外&#xff0c;还…
阅读更多...
Python之numpy常用知识点总结

Python之numpy常用知识点总结

文章目录 前言知识点1&#xff1a;np.maximum知识点2&#xff1a;ndarray数据类型知识点3&#xff1a;数据运算知识点4&#xff1a;数组和标量间的运算知识点5&#xff1a;数组的索引和切片知识点6&#xff1a;数组的转置和轴对称知识点7&#xff1a;检索数组元素 前言 在机器学…
阅读更多...
【应急响应】Windows应急响应 - 基础命令篇

【应急响应】Windows应急响应 - 基础命令篇

前言 在如今的数字化时代&#xff0c;Windows系统面对着越来越复杂的网络威胁和安全挑战。本文将深入探讨在Windows环境下的实战应急响应策略。我们将重点关注实际应急响应流程、关键工具的应用&#xff0c;以及如何快速准确地识别和应对安全事件。通过分享实际案例分析&#…
阅读更多...
基于S32K144驱动NSD8381

基于S32K144驱动NSD8381

文章目录 1.前言2.芯片介绍2.1 芯片简介2.2 硬件特性2.3 软件特性 3.测试环境3.1 工具3.2 架构 4.软件驱动4.1 SPI4.2 CTRL引脚4.3 寄存器4.4 双极性步进电机驱动流程 5.测试情况6.参考资料 1.前言 最近有些做电磁阀和调光大灯的客户需要寻找国产的双极性步进电机驱动&#xf…
阅读更多...
QT入门笔记-自定义控件封装 30

QT入门笔记-自定义控件封装 30

具体代码如下: QT core guigreaterThan(QT_MAJOR_VERSION, 4): QT widgetsCONFIG c17# You can make your code fail to compile if it uses deprecated APIs. # In order to do so, uncomment the following line. #DEFINES QT_DISABLE_DEPRECATED_BEFORE0x060000 …
阅读更多...
Spring AOP源码篇四之 数据库事务

Spring AOP源码篇四之 数据库事务

了解了Spring AOP执行过程&#xff0c;再看Spring事务源码其实非常简单。 首先从简单使用开始, 演示Spring事务使用过程 Xml配置&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema…
阅读更多...
软件架构之数据库系统（2）

软件架构之数据库系统（2）

软件架构之数据库系统&#xff08;2&#xff09; 3.4 事务管理3.4.1 并发控制3.4.2 故障与恢复 3.5 备份与恢复3.6分布式数据库系统3.6.1分布式数据库的概念3.6.2 分布式数据库的架构 3.7 数据仓库3.7.1 数据仓库的概念3.7.2数据仓库的结构3.7.3 数据仓库的实现方法 3.8 数据挖…
阅读更多...
超高精电容传感器PCAP01调试+LABVIEW数据可视化调试手记

超高精电容传感器PCAP01调试+LABVIEW数据可视化调试手记

PCAP01超高精电容传感芯片STM32LabView可视化 文章目录 PCAP01超高精电容传感芯片STM32LabView可视化一、PCAP01介绍1.1、PCAP01引脚定义1.2、电容测量1.3、温度测量1.4、PCAP典型测试电路 二、PCAP01的STM32驱动2.1、SPI协议配置2.2、PCAP01浮空电容测量内部温度测量操作流程 …
阅读更多...
计算机系统简述

计算机系统简述

目标 计算机世界并非如此神秘。相反&#xff0c;计算机是非常“确定”的一个系统&#xff0c;即在任何时候&#xff0c;在相同的方法、相同的状态下&#xff08;当然还包括相同的起始条件&#xff09;&#xff0c;同样的问题必然获得相同的结果。其实&#xff0c;计算机并不是…
阅读更多...
前端实现无缝自动滚动动画

前端实现无缝自动滚动动画

1. 前言: 前端使用HTMLCSS实现一个无缝滚动的列表效果 示例图: 2. 源码 html部分源码: <!--* Author: wangZhiyu <w3209605851163.com>* Date: 2024-07-05 23:33:20* LastEditTime: 2024-07-05 23:49:09* LastEditors: wangZhiyu <w3209605851163.com>* File…
阅读更多...
强化学习的数学原理：时序差分算法

强化学习的数学原理：时序差分算法

概述 之前第五次课时学习的 蒙特卡洛 的方法是全课程当中第一次介绍的第一种 model-free 的方法&#xff0c;而本次课的 Temporal-Difference Learning 简称 TD learning &#xff08;时序差分算法&#xff09;就是第二种 model-free 的方法。而对于 蒙特卡洛方法其是一种 non…
阅读更多...
使用大漠插件进行京东联盟转链

使用大漠插件进行京东联盟转链

由于之前开发了一套使用api转链的接口在前面几个月失效了。因为京东联盟系统升级&#xff0c;导致之前可以转的链接现在必须要升级权限才可以。但是升级条件对于我们这些自己买东西转链想省点钱的人来说基本上达不到。 所以&#xff0c;基于这种情况。我之前研究过大漠插件&am…
阅读更多...
数据库的学习（4）

数据库的学习（4）

一、题目 1、创建数据表qrade: CREATE TABLE grade(id INT NOT NULL,sex CHAR(1),firstname VARCHAR(20)NOT NULL,lastname VARCHAR(20)NOT NULL,english FLOAT,math FLOAT,chinese FLOAT ); 2、向数据表grade中插入几条数据: (3,mAllenwiiliam,88.0,92.0 95.0), (4,m,George&…
阅读更多...
第七篇——攻谋篇：兵法第一原则——兵力原则，以多胜少

第七篇——攻谋篇：兵法第一原则——兵力原则，以多胜少

目录 一、背景介绍二、思路&方案三、过程1.思维导图2.文章中经典的句子理解3.学习之后对于投资市场的理解4.通过这篇文章结合我知道的东西我能想到什么&#xff1f; 四、总结五、升华 一、背景介绍 微观层面上&#xff0c;也有很多值得深度思考的问题 二、思路&方案 …
阅读更多...
用ThreadLocal解决线程隔离问题

用ThreadLocal解决线程隔离问题

存在的以下代码所示的线程隔离问题&#xff1a; package study.用ThreadLocal解决线程隔离问题;/*线程隔离 - 在多线程并发场景下&#xff0c;每个线程的变量都应该是相互独立的线程A&#xff1a;设置&#xff08;变量1&#xff09; 获取&#xff08;变量1&#xff09;线程B&a…
阅读更多...
瑞芯微rk356x TF卡烧写选择指定的屏幕打印烧写的过程

瑞芯微rk356x TF卡烧写选择指定的屏幕打印烧写的过程

rk356x中TF卡烧写屏幕选择 1、开发环境2、问题描述3、解决办法4、总结5、 图片展示1、开发环境 系统：linux系统 芯片：356x 显示：多屏显示（HDMI, MIPI, LVDS, EDP） 2、问题描述 由于在多屏显示的情况下，HDMI屏在LVDS、MIPI或者EDP协同下，默认情况下，在TF卡烧录过程中…
阅读更多...
最新文章

Copyright @ 2022~2023