Vue | Vue.js Composition API(二)

news2024/11/28 17:37:42

🖥️ Vue.js专栏:Vue.js 初级知识 Composition API(二)
🧑‍💼 个人简介:一个不甘平庸的平凡人🍬

✨ 个人主页:CoderHing的个人主页

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力❤️


目录

一、computed函数使用

computed

setup中使用ref

二、组件的生命周期函数

生命周期钩子

三、Provide/Inject使用

Provide函数

inject函数

数据的响应式

四、watch/watchEffect

侦听数据的变化

Watch的使用

侦听多个数据源

watch的选项

watchEffect

watchEffect的停止侦听

五、自定义HOOK练习

useCounter

useScrollPosition

六、script setup语法糖

Script setup语法

顶层的绑定会被暴露给模板

导入的组件直接使用

defineProps()和defineEmits()

defineExpose()


一、computed函数使用

computed

计算属性computed:当我们的某些属性是依赖其他状态时 可以使用计算属性处理

        在前面的Options API中 我们是使用computed选项来完成的

        在Composition API中 我们可以在setup函数中使用computed方法来编写一个计算属性;

如何使用computed?

        方式一: 接收一个getter函数 并为getter函数返回值 返回一个不变的ref对象

        方式二: 接收一个具有get 和 set的对象 返回一个可变的(可读写的)ref对象

JavaScript
const fullName = computed(()=>{
  return names.firstName + " " + names.lastName
})

 

setup中使用ref

在setup中如何使用ref获取元素或者组件?

        我们只需要定义一个ref对象,绑定到元素或组件的ref属性上即可; 

 

二、组件的生命周期函数

生命周期钩子

前面说过setup可以替代data methods ...这些选项 也可以替代 生命周期钩子(函数)

那么setup中如何使用生命周期函数呢?

        可以使用直接导入的onXX函数注册生命周期钩子

 

三、Provide/Inject使用

Provide函数

在Composition API也可以替代之前的Provide和Inject的选项

我们可以通过provide来提供数据:

        通过provide方法来定义每个Property

provide可以传入两个参数:

        Name: 提供的属性名称

        Value: 提供的属性值

JavaScript
const name = ref("xiong")

provide("name",name)
provide("age",18)

inject函数

在 后代组件 中可以通过 inject 来注入需要的属性和对应的值

        可以通过 inject 来注入需要的内容

inject可以传入两个参数:

        要inject的property的name;

        默认值

JavaScript
const name = inject("name")
const age = inject("age")
const height = inject("height",1.88)

数据的响应式

        为了增加 provide值和inject值之间的响应性,可以在provide值时使用ref和reactive

JavaScript
// 使用 ref 或者 reactive
const name = ref("xiong")

provide("name",name)
provide("age",18)

四、watch/watchEffect

侦听数据的变化

在Options API中,我们可以通过 watch选项 侦听 data或props的数据变化,当数据变化时 执行某一些操作.

在Composition API中 我们可以使用 watchEffect和watch来完成响应式数据的侦听

        watchEffect:用于自动收集响应式数据的依赖

        watch:需要手动指定侦听的数据源

Watch的使用

watch的API完全等同于组件的watch选项:

        watch需要 侦听特定的数据源,并且执行其回调函数

        默认情况下,它是惰性的,只有当侦听的源发生变化时 才会执行回调

侦听多个数据源

侦听器可以使用数组同时侦听多个源:

watch的选项

如果希望侦听一个深层的侦听,需要设置deep为true 也可以传入 immediate 立即执行

JavaScript
const info = reactive({
  name:"xiong",
  age:18
})

//  默认绑定 深度侦听
watch(info,(newValue,oldValue)=>{
  console.log(newValue,oldValue)
},{
  immediate:true // 默认执行一次侦听
})

// 侦听reactive 数据变化后,获取普通对象
//  内部 执行 () =>info 这个函数 收集依赖
//  这样 就可以给我们普通对象了
watch(()=> ({...info}),(newValue,oldValue)=>{
  console.log(newValue,oldValue)
},{
  immediate:true,
  deep:true
})

watchEffect

当侦听到某些响应式数据发生变化时 希望执行某些操作 这个时候可以使用watchEffect

        watchEffect传入的函数会立即执行一次,并且在执行的过程中会收集依赖

        只有收集的依赖发生变化时 watchEffect传入的函数才会再次执行

JavaScript
const counter = ref(0)
const names = ref("xiong")

// 1 watchEffect 传入 回调函数 默认 会被自动执行
// 2 在执行的过程中,会自动的收集依赖(依赖哪些响应式的数据 就收集哪些)
watchEffect(()=>{
  console.log("-----------",counter.value,names.value)
})

watchEffect的停止侦听

JavaScript
// 当我们的counter达到时的时候 我想要停止监听 怎么实现?
//  watchEffect 是有返回值的
// 实现了
const stopWatch = watchEffect(()=>{
  console.log("-----------",counter.value,names.value)
//  再里面进行判断  counter.value>10
  if(counter.value >= 10){
    stopWatch()
  }
})

五、自定义HOOK练习

useCounter

 

useTitle

useScrollPosition

获取当前window的滚动位置

 

六、script setup语法糖

Script setup语法

<script setup>是在单文件组件(SFC)中使用组合式API的编译时语法糖,当同时使用SFC与组合式API时则推荐该语法.

        更少的样板内容,更简洁的代码.

        能够使用纯Typescript声明prop和抛出事件

        更好的运行时性能

        更好的IDE类型推断性能

使用这个语法 将setup attribute 添加到 <script>代码块上:

JavaScript
<script setup>

  const msg = "Hello World"

</script>

里面的代码会被编译成组件setup()函数的内容:

        意味着与普通的script标签 只在组件被首次引入的时候执行一次不同;

        <script setup>中的代码会在每次组件实例被创建的时候执行

顶层的绑定会被暴露给模板

当使用<script setup>的时候,任何在<script setup>声明的顶层的绑定(包括变量,函数声明,及import引入的内容)都能在模板中直接使用:

响应式数据需要通过ref reactive来创建

导入的组件直接使用

<script setup范围里的值也能被直接作为自定义组件的标签名使用:

JavaScript
<template>
  <show-info></show-info>
</template>

<script setup>
import ShowInfo from './ShowInfo'
</script>

defineProps()和defineEmits()

为了在声明props和emits选项时 获得完整的类型推断支持,我们可以使用defineProps和defineEmits API 它们将自动地在<script setup>中可用

JavaScript
<script setup>
  // 定义props defineProps接收  定义属性
  const props = defineProps({
    name:{
      type:String,
      default:"默认值"
    },
    age:{
      type:Number,
      default:0
    }
  })
  // 绑定函数,并且发出事件
  // emits
  // 定义 emits  返回一个东西给 emits
    const emits = defineEmits(["showInfoBtnClick"])
    function showInfoBtnClick(){
      // 调用 emits这个函数
      emits("showInfoBtnClick","showInfo内部发生了点击")
    }

</script>

// APP中
<show-info name="xiong"
           :age="18"
            @showInfoBtnClick="showInfoBtnClick">
</show-info>

defineExpose()

使用<script setup>的组件是默认关闭的:

        通过模板 ref 或$parent 链 获取到的组件的公开实例,不会暴露任何在<script setup>中声明的绑定.

通过defineExpose编译器 宏来显示指定在<script setup>组件中要暴露出去的property

JavaScript
    function foo(){
      console.log("foo function")
    }

    defineExpose({
      foo
    })

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

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

相关文章

嘿,朋友,其实 CSS 动画超简单的 - 时间函数篇(贝塞尔曲线、steps,看完还不懂算我输)

分配内存 - new 官方定义&#xff1a;new是一个分配内存的内置函数&#xff0c;第一个参数是类型&#xff0c;而不是值&#xff0c;返回的值是指向该类型新分配的零值的指针。 func new(Type) *Type 我们平常在使用指针的时候是需要分配内存空间的&#xff0c;未分配内存空间…

Java自定义注解

目录 一、什么是自定义注解 1&#xff09;Java注解简介 2&#xff09;Java注解分类 JDK基本注解 JDK元注解 自定义注解 如何自定义注解&#xff1f; 二、自定义注解 1&#xff09;获取类上注解值 2&#xff09;获取类属性上的注解属性值 3&#xff09;获取方法上的注…

WireShark 常用协议分析

WireShark 常用协议分析 1.3 实战&#xff1a;使用 WireShark 对常用协议抓包并分析原理 协议分析的时候 我们 关闭混淆模式&#xff0c; 避免一些干扰的数据包存在。 1.3.1 常用协议分析 - ARP 协议 地址解析协议 &#xff08;英语&#xff1a;Address Resolution Protocol&…

从内核角度看网络包发送流程

一、前置知识 1、RingBuffer结构详解 关于RingBuffer网上有很多说法&#xff0c;有的人说RingBuffer是系统启动时就预先申请好的一个环形数组&#xff0c;有的人说RingBuffer是在接收或发送数据时才动态申请的一个环形数组&#xff0c;那么到底RingBuffer的结构是怎么样的呢&…

《吉师作业》(2)之迟来的答案

前言 &#x1f340;作者简介&#xff1a;吉师散养学生&#xff0c;为挣钱努力拼搏的一名小学生。 &#x1f341;个人主页&#xff1a;吉师职业混子的博客_CSDN博客-python学习,HTML学习,清览题库--C语言程序设计第五版编程题解析领域博主 &#x1fad2;文章目的&#xff1a;我不…

初识C++(二)

简述 &#xff1a;本篇就缺省参数 和 函数重载 方面进行初步学习 &#xff0c;对比C语言学习C这两个语法&#xff0c;从而感受C在此方面对C语言进行的补充。 目录 缺省参数 什么是缺省参数 缺省参数的分类 缺省参数的应用 函数重载 什么是函数重载 函数重载的三种情况 支…

【JavaSE】函数or方法?方法的重载讲解

文章目录什么是方法如何定义方法方法的调用过程形参与实参的关系方法的重载为什么要重载重载的概念方法签名递归什么是方法 在C语言的学习中我们学习到了一个概念叫做函数&#xff0c;那么在Java的语法中有没有类似函数的东西的&#xff0c;答案是有的&#xff0c;但是在Java的…

strimzi实战之一:简介和准备

欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码)&#xff1a;https://github.com/zq2599/blog_demos 关于strimzi strimzi是一个开源项目&#xff0c;已加入了CNCF&#xff0c;官网地址&#xff1a;https://strimzi.io/借助strimzi&#xff0c;既能快速部署ka…

【生日快乐】搜索技术【深度优先搜索】 - 回溯法

搜索技术【深度优先搜索】 - 回溯法 回溯法是一种选优搜索法&#xff0c;按照选优条件深度优先搜索&#xff0c;以达到目标。当搜索到某一步时&#xff0c;发现原先的选择并不是最优或达不到目标&#xff0c;就退回一步重新选择&#xff0c;这种走不通就退回再走的技术被称为回…

如何用 Elasticsearch 实现 Word、PDF,TXT 文件的全文内容检索?

简单介绍一下需求 能支持文件的上传&#xff0c;下载 要能根据关键字&#xff0c;搜索出文件&#xff0c;要求要能搜索到文件里的文字&#xff0c;文件类型要支持 word&#xff0c;pdf&#xff0c;txt 文件上传&#xff0c;下载比较简单&#xff0c;要能检索到文件里的文字&am…

2022-ISCTF-部分MISC和PWN

misc 两层编码 第一层 sha256掩码爆破 第二层 base64解码找到key import string,sys from hashlib import sha256 from multiprocessing import Process from Crypto.Util.number import * from pwn import * import base64 from primefac import * context(log_leveldebug)…

【STL】容器 - set和map的使用

目录 前言 一.键值对 1.在SGI - STL中对键值对的定义: 2.make_pair 二.set 1.set的概念与注意事项 2.set的使用(常用接口) <1>.构造函数 <2>.迭代器与范围for <3>.插入和查找 <4>.删除erase <5>.计数count 三.map 1.map的概念与注…

洛谷千题详解 | P1012 [NOIP1998 提高组] 拼数【C++、Java语言】

博主主页&#xff1a;Yu仙笙 专栏地址&#xff1a;洛谷千题详解 目录 题目描述 输入格式 输出格式 输入输出样例 解析&#xff1a; C源码&#xff1a; C源码2&#xff1a; C源码3&#xff1a; Java源码&#xff1a; ---------------------------------------------------------…

element-ui upload图片上传组件使用

图片上传前端收集 数据 再调用接口发送到后端 组件标签内的参数&#xff1a; 参数说明类型可选值默认值action必选参数&#xff0c;上传的地址string——headers设置上传的请求头部object——multiple是否支持多选文件boolean——data上传时附带的额外参数object——name上传…

【数据结构】链表OJ第一篇 —— 移除链表元素 反转链表 合并两个有序链表

文章目录0. 前言1. 移除链表元素2. 反转链表3. 合并两个有序链表4. 结语0. 前言 上篇博客中&#xff0c;我们学习了实现了单链表。但是仅仅实现并不算掌握&#xff0c;所以我们需要做些题目来练习巩固。而从今天开始的几期&#xff0c;anduin 都会为大家带来链表OJ题&#xff…

在Linux环境下VScode中配置ROS、PCL和OpenCV开发环境记录

一.安装必要的插件 打开VScode&#xff0c;在开展中安装CMake、CMake Tools&#xff0c;ROS和catkin-tools插件&#xff0c;截图如下&#xff0c;安装后重新打开VScode插件生效。 二.创建ROS工作空间 在选择的路径下&#xff0c;打开终端创建工作空间&#xff0c;具体命令如下…

【概率论笔记】正态分布专题

文章目录一维正态分布多维正态分布n维正态分布二维正态分布一维正态分布 设X~N(μ,σ2)X\text{\large\textasciitilde}N(\mu,\sigma^2)X~N(μ,σ2)&#xff0c;则XXX的概率密度为f(x)12πσe−(x−μ)22σ2f(x)\frac{1}{\sqrt{2\pi}\sigma}e^{-\frac{(x-\mu)^2}{2\sigma^2}}f(…

WXML模板语法

文章目录1、数据绑定1.1 数据绑定的基本原则1.2在data中定义页面的数据1.3 Mustache语法的格式1.4 Mustache语法的应用场景1.5 算数运算2、事件绑定2.1 小程序常用的事件2.2事件对象的属性列表2.3 target和currentTarget的区别2.4 <font colorred>bindtap的语法格式2.5 在…

狗厂员工来面试本想难为一下,结果被虐得连console.log也不敢写了

这次说到的面试题是关于node服务端内存溢出的问题&#xff0c;狗厂员工来面试本想难为一下&#xff0c;现在我连console.log也不敢写了 关于这道node内存溢出的问题&#xff0c;大哥从以下几个方面讲的&#xff0c;讲完我觉得自己得到了升华&#xff0c;现在搞得连代码也快不敢…

2.24 OrCAD Cadence16.6怎么更改原理图中做好的库文件?

笔者电子信息专业硕士毕业&#xff0c;获得过多次电子设计大赛、大学生智能车、数学建模国奖&#xff0c;现就职于南京某半导体芯片公司&#xff0c;从事硬件研发&#xff0c;电路设计研究。对于学电子的小伙伴&#xff0c;深知入门的不易&#xff0c;特开次博客交流分享经验&a…