简记Vue3(三)—— ref、props、生命周期、hooks

news2024/11/23 1:52:44

个人简介

👀个人主页: 前端杂货铺
🙋‍♂️学习方向: 主攻前端方向,正逐渐往全干发展
📃个人状态: 研发工程师,现效力于中国工业软件事业
🚀人生格言: 积跬步至千里,积小流成江海
🥇推荐学习:🍍前端面试宝典 🎨100个小功能 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js

🌕个人推广:每篇文章最下方都有加入方式,旨在交流学习&资源分享,快加入进来吧

文章目录

    • 前言
    • ref
    • props
    • 生命周期
    • hooks

前言

重拾 Vue3,查缺补漏、巩固基础。

ref

作用:用于注册模板引用。

  • 用在普通 DOM 标签上,获取的是 DOM 节点
  • 用在组件标签上,获取的是组件实例对象

App.vue

<template>
  <h2 ref="title">你好</h2>
  <button @click="showLog">App 测试</button>
  <Person ref="ren"/>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import Person from "./components/Person.vue";

  const title = ref();

  const ren = ref();

  function showLog() {
    console.log(title.value)
    console.log(ren.value)
  }
</script>

Person.vue

<template>
  <div class="person">
    <h2 ref="title">山东</h2>
    <button @click="showLog">child 输出h2</button>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from "vue"

  const title = ref();

  const a = ref(0);
  const b = ref(1);
  const c = ref(2);

  function showLog() {
    console.log(title.value);
  }

  // 仅暴露给父组件 a 和 b
  defineExpose({ a, b });
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>

在这里插入图片描述


props

使用 props 可以实现 父组件向子组件传递 数据。

index.ts(定义规则)

// person 接口
export interface PersonInter {
    id: string,
    name: string,
    age: number
}

// export type Persons = Array<PersonInter>
export type Persons = PersonInter[]

App.vue(父组件)

<template>
  <Person :list="personList" />
</template>

<script lang="ts" setup>
  import Person from "./components/Person.vue";
  import { reactive } from 'vue';
  import { type Persons } from '@/types';

  const personList = reactive<Persons>([
    { id: '1', name: '张三', age: 20 },
    { id: '2', name: '李四', age: 22 },
    { id: '3', name: '王五', age: 18 }
  ])
</script>

Person.vue(子组件)

<template>
  <div class="person">
    <ul v-for="person in list" :key="person.id">
      <li>{{ person.name }} -- {{ person.age }}</li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
  import { defineProps, withDefaults } from "vue";
  import { type Persons } from '@/types';

  // 只接收 list
  // defineProps(['list']);

  // 接收 list + 限制类型
  // defineProps<{ list: Persons }>();

  // 接收 list + 限制类型 + 限制必要性 + 指定默认值
  withDefaults(defineProps<{ list?: Persons }>(), {
    list: () => [{id: '001', name: 'zhang', age: 20}]
  })
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>

在这里插入图片描述


生命周期

  • 创建阶段:setup
  • 挂载阶段:onBeforeMount、onMounted
  • 更新阶段:onBeforeUpate、onUpdated
  • 卸载阶段:onBeforeUnmount、onUnmounted

常用钩子:onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前)

App.vue(父组件)

<template>
  <div class="app">
    <Person v-if=isShow />
    <button @click="unMounted">卸载子组件</button>
  </div>
</template>

<script lang="ts" setup>
  import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue';
  import Person from './components/Person.vue';

  let isShow = ref(true);

  function unMounted() {
    isShow.value = false;
  }

  console.log('父--创建');

  onBeforeMount(() => {
    console.log('父--挂载前');
  }),

  onMounted(() => {
    console.log('父--挂载完毕');
  })

  onBeforeUpdate(() => {
    console.log('父--更新前');
  })

  onUpdated(() => {
    console.log('父--更新完毕');
  })

  onBeforeUnmount(() => {
    console.log('父--卸载前');
  })

  onUnmounted(() => {
    console.log('父--卸载完毕');
  })
</script>

<style scoped>
.app {
  background-color: orange;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 10px 5px;
}
</style>

Person.vue(子组件)

<template>
  <div class="person">
    {{ sum }}
    <button @click="add">求和</button>
  </div>
</template>

<script lang="ts" setup>
  import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue';
  let sum = ref(0);

  function add() {
    sum.value += 1;
  }

  console.log('子--创建');

  onBeforeMount(() => {
    console.log('子--挂载前');
  }),

  onMounted(() => {
    console.log('子--挂载完毕');
  })

  onBeforeUpdate(() => {
    console.log('子--更新前');
  })

  onUpdated(() => {
    console.log('子--更新完毕');
  })

  onBeforeUnmount(() => {
    console.log('子--卸载前');
  })

  onUnmounted(() => {
    console.log('子--卸载完毕');
  })
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述


hooks

hooks 主要用于在函数式组件中管理组件的状态和生命周期,下面我们进行一个示例。

在这里插入图片描述

Person.vue

<template>
  <div class="person">
    <h2>当前求和为:{{ sum }}</h2>
    <h2>求和放大十倍:{{ bigSum }}</h2>
    <button @click="add">+1</button>
  </div>
</template>

<script lang="ts" setup>
import { reactive, watch } from "vue";
import useSum from "../hooks/useSum";

const { sum, add, bigSum } = useSum();
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>

useSum.ts

import { computed, onMounted, ref } from "vue";

export default function () {
  let sum = ref(0);

  function add() {
    sum.value += 1;
  }

  onMounted(() => {
    add();
  });

  let bigSum = computed(() => {
    return sum.value * 10;
  });

  return { sum, add, bigSum };
}

在这里插入图片描述

在这里插入图片描述


参考资料:
https://www.bilibili.com/video/BV1Za4y1r7KE?spm_id_from=333.788.player.switch&vd_source=f839085517d2b7548b2939bfe214d466&p=29—

在这里插入图片描述


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

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

相关文章

Mybatis查询数据库,返回List集合,集合元素也是List。

#有时间需求会要求&#xff1a;查询全校的学生数据&#xff0c;且学生数据按班级划分。那么就需要List<List<user>>类型的数据。 SQL语句 SELECT JSON_ARRAYAGG(JSON_OBJECT(name , name ,BJMC, BJMC ,BJBH,BJBH)) as dev_user FROM dev_user WHERE project_id …

Freertos学习日志(1)-基础知识

目录 1.什么是Freertos&#xff1f; 2.为什么要学习RTOS&#xff1f; 3.Freertos多任务处理的原理 1.什么是Freertos&#xff1f; RTOS&#xff0c;即&#xff08;Real Time Operating System 实时操作系统&#xff09;&#xff0c;是一种体积小巧、确定性强的计算机操作系统…

批量提取当前文件夹内的文件名

在需要提取的文件夹内新建一个txt文件&#xff0c;输入&#xff1a; dir ./b>name.txt 然后将该txt文件的扩展名改为.bat 如图 双击即可提取当前文件夹文件名&#xff0c;并保存到name.txt内

小林渗透入门:burpsuite+proxifier抓取小程序流量

目录 前提&#xff1a; 代理&#xff1a; proxifier&#xff1a; 步骤&#xff1a; bp证书安装 bp设置代理端口&#xff1a; proxifier设置规则&#xff1a; proxifier应用规则&#xff1a; 结果&#xff1a; 前提&#xff1a; 在介绍这两个工具具体实现方法之前&#xff0…

Node.js:session JWT

Node.js&#xff1a;session & JWT sessioncookiesessionexpress-session JWTexpress-jwt & jsonwebtoken session HTTP协议是无状态的&#xff0c;客户端的每次HTTP请求都是独立的&#xff0c;多个请求之间没有直接的关系&#xff0c;服务器不会保留每次HTTP请求的状…

后台管理系统的通用权限解决方案(七)SpringBoot整合SpringEvent实现操作日志记录(基于注解和切面实现)

1 Spring Event框架 除了记录程序运行日志&#xff0c;在实际项目中一般还会记录操作日志&#xff0c;包括操作类型、操作时间、操作员、管理员IP、操作原因等等&#xff08;一般叫审计&#xff09;。 操作日志一般保存在数据库&#xff0c;方便管理员查询。通常的做法在每个…

曹操出行借助 ApsaraMQ for Kafka Serverless 提升效率,成本节省超 20%

本文整理于 2024 年云栖大会主题演讲《云消息队列 ApsaraMQ Serverless 演进》&#xff0c;杭州优行科技有限公司消息中间件负责人王智洋分享 ApsaraMQ for Kafka Serverless 助力曹操出行实现成本优化和效率提升的实践经验。 曹操出行&#xff1a;科技驱动共享出行未来 曹操…

Mysql常用语法一篇文章速成

文章目录 前言前置环境数据库的增删改查查询数据查询所有条件查询多条件查询模糊查询分页查询排序查询分组查询⭐️⭐️关联查询关联分页查询 添加数据insert插入多条记录不指定列名(适用于所有列都有值的情况) 更新数据更新多条记录更新多个列更新不满足条件的记录 删除统计数…

信息安全数学基础(43)理想和商环

理想&#xff08;Ideal&#xff09; 定义&#xff1a; 设R是一个环&#xff0c;I是R的一个非空子集。如果I满足以下条件&#xff0c;则称I为R的一个理想&#xff1a; 对于任意的r1, r2 ∈ I&#xff0c;有r1 - r2 ∈ I&#xff08;加法封闭性&#xff09;。对于任意的r ∈ I&am…

node.js下载、安装、设置国内镜像源(永久)(Windows11)

目录 node-v20.18.0-x64工具下载安装设置国内镜像源&#xff08;永久&#xff09; node-v20.18.0-x64 工具 系统&#xff1a;Windows 11 下载 官网https://nodejs.org/zh-cn/download/package-manager 版本我是跟着老师选的node-v20.18.0-x64如图选择 Windows、x64、v20.18…

《JVM第3课》运行时数据区

无痛快速学习入门JVM&#xff0c;欢迎订阅本免费专栏 运行时数据区结构图如下&#xff1a; 可分为 5 个区域&#xff0c;分别是方法区、堆区、虚拟机栈、本地方法栈、程序计数器。这里大概介绍一下各个模块的作用&#xff0c;会在后面的文章展开讲。 类加载子系统会把类信息…

苏州金龙新V系客车创新引领旅游出行未来

10月25日&#xff0c;为期三天的“2024第六届旅游出行大会”在风景秀丽的云南省丽江市落下帷幕。本次大会由中国旅游车船协会主办&#xff0c;全面展示了中国旅游出行行业最新发展动态和发展成就&#xff0c;为旅游行业带来全新发展动力。 在大会期间&#xff0c;备受瞩目的展车…

QML旋转选择器组件Tumbler

1. 介绍 Tumbler是一个用于创建旋转选择器的组件。它提供了一种直观的方式来让用户从一组选项中进行选择&#xff0c;类似于转盘式数字密码锁。网上找的类似网图如下&#xff1a; 在QML里&#xff0c;这种组件一共有两个版本&#xff0c;分别在QtQuick.Extras 1.4(旧)和QtQuic…

思科路由器静态路由配置

转载请注明出处 该实验为静态路由配置实验&#xff0c;仅供参考 选择三台2811路由器 关闭电源-安装模块-开启电源&#xff08;以R1为例&#xff0c;其他两台也是一样操作&#xff01;&#xff09; 连线。注意R1与R3之间、R3与R2之间用DCE串口线&#xff08;如下图&#xff09;…

闪存学习_2:Flash-Aware Computing from Jihong Kim

闪存学习_2&#xff1a;Flash-Aware Computing from Jihong Kim【1】 一、三个闪存可靠性问题二、内存的分类三、NAND 闪存和 NOR 闪存四、HDD和SSD比较Reference 一、三个闪存可靠性问题 耐性&#xff08;即寿命&#xff09;&#xff1a;最多能经受编程和擦除的次数。数据保留…

双指针问题解法集(一)

1.指针对撞问题&#xff08;利用有序数组的单调性衍生&#xff09; 1.1LCR 179. 查找总价格为目标值的两个商品 - 力扣&#xff08;LeetCode&#xff09;​​​​​​ 1.1.1题目解析 有序数组&#xff0c;找到和为price的两个元素&#xff0c;只需要一个解即可。 1.1.2算法…

深度学习(十):伦理与社会影响的深度剖析(10/10)

深度学习&#xff1a;伦理与社会影响的深度剖析 一、深度学习的伦理挑战 &#xff08;一&#xff09;数据隐私之忧 深度学习模型的训练往往需要大量数据&#xff0c;而数据的收集过程可能会侵犯个人隐私。例如&#xff0c;据统计&#xff0c;面部识别技术在全球范围内每天会收…

网络模型——二层转发原理

网课地址&#xff1a;网络模型_二层转发原理&#xff08;三&#xff09;_哔哩哔哩_bilibili 一、路由交换 网络&#xff1a;用来信息通信&#xff0c;信息共享的平台。 网络节点&#xff08;交换机&#xff0c;路由器&#xff0c;防火墙&#xff0c;AP&#xff09;介质&#…

探索NetCat:网络流量监测与数据传输的利器

从简单的数据传输到复杂的网络调试&#xff0c;NetCat的灵活性和多功能性让人赞叹不已&#xff0c;在这篇文章中我将深入探讨NetCat的魅力&#xff0c;揭示它的基本功能、实用技巧以及在日常工作中的应用场景&#xff0c;发现如何用这一小工具提升的网络技能与效率。 目录 Net…

提高交换网络可靠性之链路聚合

转载请注明出处 该实验为链路聚合的配置实验。 1.改名&#xff0c;分别将交换机1和交换机2改名为S1&#xff0c;S2&#xff0c;然后查看S1&#xff0c;S2的STP信息。以交换机1为例&#x1f447;。 2.交换机S1&#xff0c;S2上创建聚合端口&#xff0c;将端口加入聚合端口。以S…