助你丝滑过度到 Vue3 其组合式API的应用 ②⑦

news2024/11/18 11:49:31

请添加图片描述

@作者 : SYFStrive

 
请添加图片描述

@博客首页 : HomePage

📜： VUE3~TS

📌：个人社区（欢迎大佬们加入） 👉：社区链接🔗

📌：觉得文章不错可以点点关注 👉：专栏连接🔗

请添加图片描述
相关专栏

👉 TypeScript（🔥）
👉 微信小程序（🔥）
👉 UNIAPP开发（🔥）

目录

  • VUE3 JS
  • 🗡 其它 Composition API
  •     1、shallowReactive 与 shallowRef
  •     2、readonly 与 shallowReadonly
  •     3、toRaw 与 markRaw
  •     4、customRef
  •     5、provide 与 inject
  •     6、响应式数据的判断
  • 最后

                    ⡖⠒⠒⠒⠤⢄⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸   ⠀⠀⠀⡼⠀⠀⠀⠀ ⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢶⣲⡴⣗⣲⡦⢤⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠋⠉⠉⠓⠛⠿⢷⣶⣦⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠇⠀⠀⠀⠀⠀⠀⠘⡇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡞⠀⠀⠀⠀⠀⠀⠀⢰⠇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡴⠊⠉⠳⡄⠀⢀⣀⣀⡀⠀⣸⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠰⠆⣿⡞⠉⠀⠀⠉⠲⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠈⢧⡀⣀⡴⠛⡇⠀⠈⠃⠀⠀⡗⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣱⠃⡴⠙⠢⠤⣀⠤⡾⠁⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⢀⡇⣇⡼⠁⠀⠀⠀⠀⢰⠃⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⣸⢠⣉⣀⡴⠙⠀⠀⠀⣼⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡏⠀⠈⠁⠀⠀⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠀⠀⠀⠀⠀⠀⡼⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⣰⠃⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⣀⠤⠚⣶⡀⢠⠄⡰⠃⣠⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⢀⣠⠔⣋⣷⣠⡞⠀⠉⠙⠛⠋⢩⡀⠈⠳⣄⠀⠀⠀⠀⠀⠀⠀
⠀⡏⢴⠋⠁⠀⣸⠁⠀⠀⠀⠀⠀ ⠀⣹⢦⣶⡛⠳⣄⠀⠀⠀⠀⠀
⠀⠙⣌⠳⣄⠀⡇   不能   ⡏⠀⠀  ⠈⠳⡌⣦⠀⠀⠀⠀
⠀⠀⠈⢳⣈⣻⡇   白嫖 ⢰⣇⣀⡠⠴⢊⡡⠋⠀⠀⠀⠀
⠀⠀⠀⠀⠳⢿⡇⠀⠀⠀⠀⠀⠀⢸⣻⣶⡶⠊⠁⠀⠀
⠀⠀⠀⠀⠀⢠⠟⠙⠓⠒⠒⠒⠒⢾⡛⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⣠⠏⠀⣸⠏⠉⠉⠳⣄⠀⠙⢆⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⡰⠃⠀⡴⠃⠀⠀⠀⠀⠈⢦⡀⠈⠳⡄⠀⠀⠀⠀⠀⠀⠀
⠀⠀⣸⠳⣤⠎⠀⠀⠀⠀⠀⠀⠀⠀⠙⢄⡤⢯⡀⠀⠀⠀⠀⠀⠀
⠀⠐⡇⠸⡅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⡆⢳⠀⠀⠀⠀⠀⠀
⠀⠀⠹⡄⠹⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⠸⡆⠀⠀⠀⠀⠀
⠀⠀⠀⠹⡄⢳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⡀⣧⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢹⡤⠳⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣷⠚⣆⠀⠀⠀⠀
⠀⠀⠀⡠⠊⠉⠉⢹⡀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡎⠉⠀⠙⢦⡀⠀
⠀⠀⠾⠤⠤⠶⠒⠊⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠙⠒⠲⠤⠽

提示：以下是本篇文章正文内容

VUE3 JS

简介 ： 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王）
耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者

  • github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0
  • 官方
  1. 国内爱好者官网 ：https://vue3js.cn/
  2. 中文 ： https://www.javascriptc.com/vue3js/
  3. 英文 ： https://cn.vuejs.org/
  4. Vue 相关包 ： https://github.com/vuejs/awesome-vue
  5. Vue 相关插件 ： https://awesomejs.dev/for/vue/
  6. Vue API ：https://cn.vuejs.org/api/

🗡 其它 Composition API

    1、shallowReactive 与 shallowRef

  • shallowReactive：只处理对象最外层属性的响应式（浅响应式）。

  • shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。

  • 什么时候使用?

    • 如果有一个对象数据，结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。
    • 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef。
  • 代码演示
<template>
  <span>{{person1.y}}</span>
  <span>{{person2.y}}</span>
  <button @click="person1.y++">点击</button>
  <button @click="person2.y++">点击</button>
</template>

<script>
import {reactive, toRefs, shallowRef, shallowReactive} from 'vue'
export default {
  name: 'HelloWorld',
  setup(){
    let person1 = shallowRef({
      y:50
    })
    let person2 = shallowReactive({
      y:50
    })
    //返回一个对象（常用）
    return {
      person1,
      person2
    }
  }
}
</script>

    2、readonly 与 shallowReadonly

  • readonly: 让一个响应式数据变为只读的（深只读）。
  • shallowReadonly：让一个响应式数据变为只读的（浅只读）→ 读取第二层就没效果了 ！
  • 应用场景: 不希望数据被修改时。
  • 代码演示
<template>
  <h4>当前求和为：{{sum}}</h4>
  <button @click="sum++">点我++</button>
  <hr>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪资：{{job.j1.salary}}K</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="job.j1.salary++">涨薪</button>
</template>

<script>
import {ref,reactive,toRefs,readonly,shallowReadonly} from 'vue'
export default {
  name: 'HelloWorld',
  setup(){
    //数据
    let sum = ref(0)
    let person = reactive({
      name:'张三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })

    person = readonly(person)
    person = shallowReadonly(person)
    sum = readonly(sum)
    sum = shallowReadonly(sum)

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

    3、toRaw 与 markRaw

  • toRaw：
    • 作用：将一个由reactive生成的响应式对象转为普通对象。
    • 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。
      –
  • markRaw：

    • 作用：标记一个对象，使其永远不会再成为响应式对象。

    • 应用场景 ↓

      1. 有些值不应被设置为响应式的，例如复杂的第三方类库等。
      2. 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。
  • 代码演示
<template>
  <div v-show="person.car">{{person.car}}</div>
  <button @click="showRawPerson">输出最原始的person</button>
  <button @click="addCar">给人添加一台车对象</button>
  <button @click="person.car.name+='!'">换车名</button>
  <button @click="changePrice">换价格</button>
</template>

<script>
import {ref,reactive,toRefs,toRaw,markRaw} from 'vue'
export default {
  name: 'HelloWorld',
  setup(){
    //数据
    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 {
      person,
      ...toRefs(person),
      showRawPerson,
      addCar,
      changePrice
    }
  }
}
</script>

    4、customRef

  • 作用：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。

  • 实现防抖效果：

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

<script>
import {customRef} from 'vue'
export default {
 name: 'App',
 setup() {
   
   //自定义一个ref——名为：myRef
   function myRef(value,delay){
     let timer
     return customRef((track,trigger)=>{
       return {
         get(){
           console.log(`有人从myRef这个容器中读取数据了，我把${value}给他了`)
           track() //通知Vue追踪value的变化（提前和get商量一下，让他认为这个value是有用的）
           return value
         },
         set(newValue){
           console.log(`有人把myRef这个容器中数据改为了：${newValue}`)
           clearTimeout(timer)
           timer = setTimeout(()=>{
             value = newValue
             trigger() //通知Vue去重新解析模板
           },delay)
         },
       }
     })
   }

   // let keyWord = ref('hello') //使用Vue提供的ref
   let keyWord = myRef('hello',500) //使用程序员自定义的ref

   return {keyWord}
 }
}
</script>

    5、provide 与 inject

图示 ↓

在这里插入图片描述

  • 作用：实现祖与后代组件间通信

  • 套路：父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据

  • 具体写法：

  1. 祖组件中：
setup(){
	......
    let car = reactive({name:'奔驰',price:'40万'})
    provide('car',car)
    ......
}
  1. 后代组件中：
setup(){
	......
    const car = inject('car')
    return {car}
	......
}
  • 代码演示

App

<template>
  <div class="box">主
    <helloWorld></helloWorld>
  </div>
</template>

<script>
import helloWorld from "@/components/Father";
import {provide, reactive} from "vue";

export default {
  name: 'App',
  components:{helloWorld},
  setup() {
    let obj = reactive({name:"小明",age:18})

    provide('obj',obj)
  }
}
</script>

<style scoped>
.box{
  width: 500px;
  height: 200px;
  background-color: red;
}
</style>
  • Father
<template>
  <div class="box1">父
    <grandson></grandson>
  </div>
</template>

<script>
import {ref,reactive,toRefs,toRaw,markRaw} from 'vue'
import grandson from "@/components/Grandson";
export default {
  name: 'Father',
  components:{grandson},
  setup() {
  }
}
</script>

<style scoped>
.box1{
  width: 500px;
  height: 200px;
  background-color: #2665ff;
}
</style>
  • Grandson
<template>
  <div class="box2">
    孙
    <div>获取祖组件的数据 {{obj}}</div>
  </div>
</template>

<script>
import {inject} from "vue";

export default {
  name: "Grandson",
  setup() {
    let obj = inject('obj')
    return{obj}
  }
}
</script>

<style scoped>
.box2 {
  width: 500px;
  height: 200px;
  background-color: #32ffd0;
}
</style>

效果

在这里插入图片描述

    6、响应式数据的判断

  • isRef: 检查一个值是否为一个 ref 对象
  • isReactive: 检查一个对象是否是由 reactive 创建的响应式代理
  • isReadonly: 检查一个对象是否是由 readonly 创建的只读代理
  • isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理
  • 响应式数据的判断 代码演示
<template>
  <h3>我是App组件</h3>
</template>

<script>
import {ref, reactive,toRefs,readonly,isRef,isReactive,isReadonly,isProxy } from 'vue'
export default {
  name:'App',
  setup(){
    let sum = ref(0)
    let car = reactive({name:'奔驰',price:'40W'})
    let car2 = readonly(car)

    console.log(isRef(sum))
    console.log(isReactive(car))
    console.log(isReadonly(car2))
    console.log(isProxy(car))
    console.log(isProxy(sum))

    return {...toRefs(car)}
  }
}
</script>

<style>
.app{
  background-color: gray;
  padding: 10px;
}
</style>

最后

以上是个人学习Vue3的相关知识点，一点一滴的记录了下来，有问题请评论区指正，共同进步，这才是我写文章的原因之，如果这篇文章对您有帮助请三连支持一波

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C++成神之路 | 第一课【步入C++的世界】

C++成神之路 | 第一课【步入C++的世界】

目录 一、认识C++ 1.1、关于 C++ 1.2、C++的前世今生 1.2.1、C+
阅读更多...
【Tomcat---1】IDEA控制台tomcat日志输出乱码解决

【Tomcat---1】IDEA控制台tomcat日志输出乱码解决

一、修改IDEA的文件编码配置为UTF-8 二、修改IDEA的vmoptions文件&#xff0c;添加-Dfile.encodingUTF-8 到Tomcat目录/conf文件夹修改logging.properties 重启idea即可。采用统一的编码
阅读更多...
ansible的脚本——playbook剧本

ansible的脚本——playbook剧本

目录 一、playbook的组成 二、 playbook安装httpd服务 1.编写playbook剧本 2.运行playbook 三、定义、引用变量 四、 指定远程主机sudo切换用户 五、when条件判断 六、迭代 七、Templates 模块 1.先准备一个以 .j2 为后缀的 template 模板文件&#xff0c;设置引用的变…
阅读更多...
10kV 电力电缆交流耐压试验方案

10kV 电力电缆交流耐压试验方案

阅读更多...
微信小程序生成带参数的二维码base64转png显示

微信小程序生成带参数的二维码base64转png显示

getQRCode() {var that this;wx.request({url: http://localhost:8080/getQRCode?ID 13,header: {content-type: application/json},method: POST,responseType: arraybuffer,//将原本按文本解析修改为arraybuffersuccess(res) {that.setData({getQRCode: wx.arrayBufferToB…
阅读更多...
Java集合篇

Java集合篇

前言&#xff1a;笔者参考了JavaGuide、三分恶等博主的八股文&#xff0c;结合Chat老师和自己的理解&#xff0c;整理了一篇关于Java集合的八股文。希望对各位读者有所帮助~~ 引言 常见集合有哪些&#xff1f; Java集合相关类和接口都在java.util包中&#xff0c;按照其存储…
阅读更多...
JVM基础篇-虚拟机栈

JVM基础篇-虚拟机栈

JVM基础篇-虚拟机栈 定义 Java Virtual Machine Stacks &#xff08;Java 虚拟机栈&#xff09; 每个线程运行时所需要的内存&#xff0c;称为虚拟机栈每个栈由多个栈帧&#xff08;Frame&#xff09;组成&#xff0c;对应着每次方法调用时所占用的内存每个线程只能有一个活动…
阅读更多...
Spring的创建及使用

Spring的创建及使用

文章目录 什么是SpringSpring项目的创建存储Bean对象读取Bean对象getBean()方法 更简单的读取和存储对象的方式路径配置使用类注解存储Bean对象关于五大类注解使用方法注解Bean存储对象Bean重命名 Bean对象的读取 使用Resource注入对象Resource VS Autowired同一类型多个bean对…
阅读更多...
QT服务器练习

QT服务器练习

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);//给服务器指针实例化空间server new QTcpServer(this); }Widget::~Widget() {delete ui; }//启动服务器按钮对…
阅读更多...
第1篇：了解Matter物模型翻译器

第1篇：了解Matter物模型翻译器

第1篇&#xff1a;了解Matter物模型翻译器 1. Matter物模型简介2. 物模型翻译成编程语言3. 思考题 1. Matter物模型简介 Matter物模型的介绍可以参考: Matter Core Specification的第7章 Matter物模型直观展示&#xff0c;可以看下图1-1&#xff0c; Matter Dimmable Light的…
阅读更多...
【Linux】7、D-Bus 消息总线系统

【Linux】7、D-Bus 消息总线系统

文章目录 d-bus 官网 d-bus详解 D-Bus 是一种消息总线系统&#xff0c;是应用程序相互通信的一种简单方法。除了进程间通信之外&#xff0c;D-Bus 还有助于协调进程生命周期; 它使得编写“单实例”应用程序或守护进程以及在需要应用程序和守护进程的服务时按需启动它们变得简…
阅读更多...
【学习笔记】关于RAW图片的概念学习

【学习笔记】关于RAW图片的概念学习

这里是尼德兰的喵芯片设计相关文章&#xff0c;欢迎您的访问&#xff01; 如果文章对您有所帮助&#xff0c;期待您的点赞收藏&#xff01; 让我们一起为成为芯片前端全栈工程师而努力&#xff01; 前言 能为我介绍一下raw图片吗&#xff1f; 当谈论"Raw图片"时&am…
阅读更多...
c++ ，vs2019， cpp20规范之 forward_list 源码分析

c++ ，vs2019， cpp20规范之 forward_list 源码分析

通过阅读源码可知&#xff0c;该单向链表不像list双向链表那样有专门的前导节点。即list._Mypair._Myval2._head._next才指向第一个有效数据节点。而 forward_list ._Mypair._Myval2._head 已经指向了有效数据节点。原因就在于复杂巧妙的类型转换。如下图的构造函数里&#xff…
阅读更多...
C语言实现定时器，定时触发函数

C语言实现定时器，定时触发函数

最近想到使用C语言实现一个简单的定时器。使用操作系统windows.h提供的多线程API就能实现 首先定义一个定时器结构体&#xff0c;包含定时时间和触发的函数指针 typedef struct Stimer{int valid;//定时器有效long timingMS;//定时时间TriggerFunc tf;//触发函数 }Stimer;创建…
阅读更多...
python下的control库使用

python下的control库使用

文章目录 control的官方网站函数示例强迫响应forced_response control的官方网站 函数示例 强迫响应forced_response import numpy as np import os import sys import control as ctrl import matplotlib.pyplot as pltdef lim_x(x, lim0):res 0if x > lim:res 1else:…
阅读更多...
qt代码练习

qt代码练习

计时器练习 namespace Ui { class third; }class third : public QWidget {Q_OBJECTpublic:explicit third(QWidget *parent nullptr);~third();QLabel *labth1 new QLabel(this);QTextEdit *txtth1 new QTextEdit("闹钟",this);QLineEdit *leth1 new QLineEdit(t…
阅读更多...
Stable Diffusion：网页版 体验 / AI 绘图

Stable Diffusion：网页版 体验 / AI 绘图

一、官网地址 Stable Diffusion Online 二、Stable Diffusion AI 能做什么 Stable Diffusion AI绘图是一种基于Stable Diffusion模型的生成式AI技术&#xff0c;能够生成各种类型的图像&#xff0c;包括数字艺术、照片增强和图像修复等。以下是一些可能的应用&#xff1a; …
阅读更多...
《吐血整理》进阶系列教程-拿捏Fiddler抓包教程(13)-Fiddler请求和响应断点调试

《吐血整理》进阶系列教程-拿捏Fiddler抓包教程(13)-Fiddler请求和响应断点调试

1.简介 Fiddler有个强大的功能&#xff0c;可以修改发送到服务器的数据包&#xff0c;但是修改前需要拦截&#xff0c;即设置断点。设置断点后&#xff0c;开始拦截接下来所有网页&#xff0c;直到取消断点。这个功能可以在数据包发送之前&#xff0c;修改请求参数&#xff1b…
阅读更多...
【wsl-windows子系统】安装、启用、禁用以及同时支持docker-desktop和vmware方案

【wsl-windows子系统】安装、启用、禁用以及同时支持docker-desktop和vmware方案

如果你要用docker桌面版&#xff0c;很可能会用到wsl&#xff0c;如果没配置好&#xff0c;很可能wsl镜像会占用C盘很多空间。 前提用管理员身份执行 wsl-windows子系统安装和启用 pushd "%~dp0" dir /b %SystemRoot%\servicing\Packages\*Hyper-V*.mum >hyper…
阅读更多...
什么是DOTS？

什么是DOTS？

(图片为实机测试) DOTS全称&#xff1a;&#xff08;Burst Job SystemEntity Component System&#xff09; 新型高性能、多线程面向数据的技术堆栈 是由&#xff1a;BrustJob System ECS组合而成&#xff0c;是一种面向数据对象的编程体系&#xff0c;在unity中您也可以对…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023