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

个人简介

👀个人主页: 前端杂货铺
🙋‍♂️学习方向: 主攻前端方向,正逐渐往全干发展
📃个人状态: 研发工程师,现效力于中国工业软件事业
🚀人生格言: 积跬步至千里,积小流成江海
🥇推荐学习:🍍前端面试宝典 🎨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—

在这里插入图片描述


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

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

相关文章

WPF+MVVM案例实战(十二)- 3D数字翻牌计时实现

文章目录 1、运行效果2、功能实现1、文件创建2、控件代码实现3、控件引用与菜单实现1.引用用户控件2.按钮菜单3、计时器界面实现4、源代码获取1、运行效果 3D数字翻牌计时 2、功能实现 1、文件创建 打开项目 Wpf_Examples ,在用户控件 UserControlLib 中创建 NumberFoldi…

3.1 快速启动Flink集群

文章目录 1. 环境配置2. 本地启动3. 集群启动4. 向集群提交作业4.1 提交作业概述4.2 添加打包插件4.3 将项目打包4.4 在Web UI上提交作业4.5 命令行提交作业 在本实战中&#xff0c;我们将快速启动Apache Flink 1.13.0集群&#xff0c;并在Hadoop集群环境中提交作业。首先&…

逻辑编程填词游戏

逻辑编程 接前面着色应用回溯倒水递归汉诺塔代码从hello world开始 填词游戏题目答案验证 后话 接前面 着色应用 让人眼前一亮。能不能解决其他冲突问题呢&#xff1f; 回溯倒水 也有冲突检测&#xff0c;一步一步试探。倒水逻辑跟着色很像。怎么写成逻辑编程代码呢&#x…

AprilTag在相机标定中的应用简介

1. AprilTag简介 相机标定用的标靶类型多样,常见的形式有棋盘格标靶和圆形标靶。今天要介绍的AprilTag比较特别,它是一种编码形式的标靶。其官网为AprilTag,它是一套视觉基准系统,包含标靶编解码方法(Tag生成)和检测算法(Tag检测),可用于AR、机器人、相机标定等领域。…

Java项目实战II基于Spring Boot的秒杀系统设计与实现(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。 一、前言 在互联网电商蓬勃发展的今天&#xff0…

AI产品经理全攻略:策略制定、开发过程与商业化路径【AI产品经理必读书籍】

通过《AI产品经理手册》&#xff0c;将可以了解不同类型的AI&#xff0c;如何将AI整合到产品或业务中&#xff0c;以及支持创建AI产品或将AI集成到现有产品所需的基础设施。熟悉实践管理AI产品开发流程、评估和优化AI模型&#xff0c;以及应对与AI产品相关的复杂伦理和法律问题…

Efficient Cascaded Multiscale Adaptive Network for Image Restoration 论文阅读笔记

Efficient Cascaded Multiscale Adaptive Network for Image Restoration 论文阅读笔记 这是新国立和新加坡管理大学发表在ECCV2024上的一篇image restoration的文章&#xff0c;提出了一个新的网络结构ECMA&#xff0c;从实验结果上看在超分&#xff0c;去噪&#xff0c;去模糊…

Web服务器(理论)

目录 Web服务器www简介常见Web服务程序介绍&#xff1a;服务器主机主要数据浏览器 网址及HTTP简介URLhttp请求方法:2.3 HTTP协议请求的工作流程&#xff1a; www服务器的类型静态网站动态网站 快速安装Apache安装准备工作httpd所需目录主配置文件 nignx安装1、安装2、准备工作 …

钉钉平台开发小程序

一、下载小程序开发者工具 官网地址&#xff1a;小程序开发工具 - 钉钉开放平台 客户端类型 下载链接 MacOS x64 https://ur.alipay.com/volans-demo_MiniProgramStudio-x64.dmg MacOS arm64 https://ur.alipay.com/volans-demo_MiniProgramStudio-arm64.dmg Windows ht…

青春的海洋:海滨学院班级回忆录项目

3系统分析 3.1可行性分析 通过对本海滨学院班级回忆录实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本海滨学院班级回忆录采用SSM框架&#xff0c;JAVA作为开…

【Linux】IPC 进程间通信(一):管道(匿名管道命名管道)

✨ 无人扶我青云志&#xff0c;我自踏雪至山巅 &#x1f30f; &#x1f4c3;个人主页&#xff1a;island1314 &#x1f525;个人专栏&#xff1a;Linux—登神长阶 ⛺️ 欢迎关注&#xff1a;&#x1f44d;点赞 &#…

SpringBoot源码(四):run() 方法解析(一)

run()方法&#xff1a; public ConfigurableApplicationContext run(String... args) {// 记录应用启动时间long startTime System.nanoTime();DefaultBootstrapContext bootstrapContext createBootstrapContext();// 创建 ConfigurableApplicationContext 对象Configurabl…

FCP-报表开发工程师 考试内容

报表开发工程师考试内容 文章目录 报表开发工程师考试内容1. 报考说明2. 考试内容2.1 FineReport 产品能力 80%2.2 前端语言 10%2.3 SQL 编程语言 5%2.4 运维能力 5 % 3. 考试知识结构3.1 复杂报表开发 20% ~ 30%3.2 数据填报功能 10%3.3 决策报表 0%~10%3.4 层次坐标专题 0%~5…

Spring中的资源以及分类

Spring中的资源都被封装成 Resource 对象 以上是我测试代码的项目编译后的目录结构&#xff0c;target 所在的目录是 D:\\IdeaProjects\\study-spring\\ public void printStream(InputStream inputStream) throws IOException {Reader reader new InputStreamReader(input…

xtu oj 连接字符串

文章目录 回顾思路代码 回顾 AB III问题 H: 三角数问题 G: 3个数等式 数组下标查询&#xff0c;降低时间复杂度1405 问题 E: 世界杯xtu 数码串xtu oj 神经网络xtu oj 1167 逆序数&#xff08;大数据&#xff09;xtu oj 原根xtu oj 不定方程的正整数解xtu oj 最多的可变换字符串…

[Prometheus学习笔记]从架构到案例,一站式教程

文章目录 Prometheus 优势Prometheus 的组件、架构Prometheus Server 直接从监控目标中或者间接通过推送网关来拉取监控指标&#xff0c;它在本地存储所有抓取到的样本数据&#xff0c;并对此数据执行一系列规则&#xff0c;以汇总和记录现有数据的新时间序列或生成告警。可以通…

鸿蒙打包hvigorw clean报错No npmrc file is matched in the current user folder解决

问题 在执行hvigorw clean等命令时&#xff0c;报错如下&#xff1a; Error: The hvigor depends on the npmrc file. No npmrc file is matched in the current user folder. Configure the npmrc file first解决方案 在用户当前目录下新建.npmrc文件&#xff0c;并配置如下…

读数据工程之道:设计和构建健壮的数据系统27转换

1. 转换 1.1. 转换与查询不同 1.1.1. 查询是根据过滤和连接逻辑从各种来源检索数据 1.1.2. 转换将结果持久化&#xff0c;供其他转换或查询使用 1.1.2.1. 结果可以被短暂地或永久地保存 1.1.3. 除了持久性&#xff0c;转换区别于查询的另一个特点是复杂性 1.1.3.1. 你可能会建…

市场分化!汽车零部件「变天」

全球汽车市场的动荡不安&#xff0c;还在持续。 本周&#xff0c;全球TOP20汽车零部件公司—安波福&#xff08;Aptiv&#xff09;发布2024年第三季度财报显示&#xff0c;三季度公司经调整后确认收入同比下降6%&#xff1b;按照区域市场来看&#xff0c;也几乎是清一色的下滑景…

Java面试经典 150 题.P26. 删除有序数组中的重复项(003)

本题来自&#xff1a;力扣-面试经典 150 题 面试经典 150 题 - 学习计划 - 力扣&#xff08;LeetCode&#xff09;全球极客挚爱的技术成长平台https://leetcode.cn/studyplan/top-interview-150/ 题解&#xff1a; class Solution {public int removeDuplicates(int[] nums) …