Vue3+ts(day05:ref、props、生命周期、hook)

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes

觉得有帮助的同学,可以点心心支持一下哈(笔记是根据b站上学习的尚硅谷的前端视频【张天禹老师】,记录一下学习笔记,用于自己复盘,有需要学习的可以去b站学习原版视频)

一、标签的 ref 属性

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

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

子组件:

<template><div class="person"><h1>尚硅谷</h1><h2 ref="title2">前端</h2><h3>Vue</h3><button @click="showLog">点我输出这个元素</button></div>
</template><!-- 子组件Person.vue中要使用defineExpose暴露内容 -->
<script lang="ts" setup name="Person">
import { ref, defineExpose } from 'vue'
// 数据
let title2 = ref()
let name = ref('张三')
let age = ref(18)
/****************************/
/****************************/
function showLog () {console.log(title2.value)
}
// 使用defineExpose将组件中的数据交给外部
defineExpose({ name, age })
</script><style>
.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
button {margin: 0px 5px;
}
</style>

父组件:

<!-- 父组件App.vue -->
<template><Person ref="ren" /><button @click="test">测试</button>
</template><script lang="ts" setup name="App">
import Person from './components/Person.vue'
import { ref } from 'vue'let ren = ref()function test () {console.log(ren.value)// console.log(ren.value.name)// console.log(ren.value.age)
}
</script>

二、props

父组件传递值给子组件

// 定义一个接口,限制每个Person对象的格式
export interface PersonInter {
id:string,
name:string,age:number
}// 定义一个自定义类型Persons
export type Persons = Array<PersonInter>

App.vue中代码:

<template><Person :list="persons"/>
</template><script lang="ts" setup name="App">
import Person from './components/Person.vue'
import {reactive} from 'vue'import {type Persons} from './types'let persons = reactive<Persons>([{id:'e98219e12',name:'张三',age:18},{id:'e98219e13',name:'李四',age:19},{id:'e98219e14',name:'王五',age:20}])
</script>

Person.vue中代码:

<template>
<div class="person">
<ul><li v-for="item in list" :key="item.id">{{item.name}}--{{item.age}}</li></ul>
</div>
</template><script lang="ts" setup name="Person">
import {defineProps} from 'vue'
import {type PersonInter} from '@/types'// 第一种写法:仅接收
// const props = defineProps(['list'])// 第二种写法:接收+限制类型
// defineProps<{list:Persons}>()// 第三种写法:接收+限制类型+指定默认值+限制必要性
let props = withDefaults(defineProps<{list?:Persons}>(),{list:()=>[{id:'asdasg01',name:'小猪佩奇',age:18}]
})
console.log(props)
</script>

三、生命周期

解析流程:index.html=>main.ts=>person(子组件)=>app(父组件) 【先解析子组件再父组件】

  • 概念:Vue组件实例在创建时要经历一系列的初始化步骤,在此过程中Vue会在合适的时机,调用特定的函数,从而让开发者有机会在特定阶段运行自己的代码,这些特定的函数统称为:生命周期钩子
  • 规律:生命周期整体分为四个阶段,分别是:创建、挂载、更新、销毁,每个阶段都有两个钩子,一前一后。

Vue2的生命周期

创建阶段:beforeCreate、created挂载阶段:beforeMount、mounted更新阶段:beforeUpdate、updated销毁阶段:beforeDestroy、destroyed

  • 实例代码:

子组件

<template><div class="person"><h2>当前求和为:{{ sum }}</h2><button @click="add">点我sum+1</button></div>
</template><script>
export default {/* eslint-disable */name: 'Person',// 数据data() {return {sum: 1}},// 方法methods: {add() {this.sum += 1}},// 创建前beforeCreate() {console.log('创建前')},// 创建完毕created() {console.log('创建完毕')},// 挂载前beforeMount() {console.log('挂载前')},// 挂载完毕mounted() {console.log('挂载完毕')},// 更新前beforeUpdate() {console.log('更新前')},// 更新完毕updated() {console.log('更新完毕')},// 销毁前beforeDestroy() {console.log('销毁前')},// 销毁完毕destroyed() {console.log('销毁完毕')}
}
</script>

父组件:

<template><div id="app"><Person v-if="isshow" /></div>
</template><script>
import Person from './components/Person.vue'export default {name: 'App',components: {Person},data () {return {isshow: true}}
}
</script>

Vue3的生命周期

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

  • 常用的钩子:onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前)
  • 示例代码:

子组件:

<template><div class="person"><h2>当前求和为:{{ sum }}</h2><button @click="changeSum">点我sum+1</button></div>
</template><!-- vue3写法 -->
<script lang="ts" setup name="Person">
import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted
} from 'vue'// 数据
let sum = ref(0)
// 方法
function changeSum () {sum.value += 1
}
console.log('setup')
// 生命周期钩子
onBeforeMount(() => {console.log('挂载之前')
})
onMounted(() => {console.log('子---挂载完毕')
})
onBeforeUpdate(() => {console.log('更新之前')
})
onUpdated(() => {console.log('更新完毕')
})
onBeforeUnmount(() => {console.log('卸载之前')
})
onUnmounted(() => {console.log('卸载完毕')
})
</script>

父组件:

<template><Person v-if="isShow" />
</template><script lang="ts" setup name="App">
import Person from './components/Person.vue'
import { ref, onMounted } from 'vue'
let isShow = ref(true)
onMounted(() => {console.log('父---挂载完毕')
})
</script>

四、自定义hook

  • 什么是hook?—— 本质是一个函数,把setup函数中使用的Composition API进行了封装,类似于vue2.x中的mixin。
  • 自定义hook的优势:复用代码, 让setup中的逻辑更清楚易懂。

示例代码:

  • useSum.ts中内容如下:
import { ref, onMounted } from "vue";export default function () {let sum = ref(0);const increment = () => {sum.value += 1;};const decrement = () => {sum.value -= 1;};onMounted(() => {increment();});//向外部暴露数据return { sum, increment, decrement };
}
  • useDog.ts中内容如下:
import { reactive, onMounted } from "vue";
import axios, { AxiosError } from "axios";export default function () {let dogList = reactive<string[]>([]);// 方法async function getDog() {try {// 发请求let { data } = await axios.get("https://dog.ceo/api/breed/pembroke/images/random");// 维护数据dogList.push(data.message);} catch (error) {// 处理错误const err = <AxiosError>error;console.log(err.message);}}// 挂载钩子onMounted(() => {getDog();});//向外部暴露数据return { dogList, getDog };
}
  • 组件中具体使用:
<template><h2>当前求和为:{{ sum }}</h2><button @click="increment">点我+1</button><button @click="decrement">点我-1</button><hr /><img v-for="(u, index) in dogList" :key="index" :src="u" /><br /><button @click="getDog">再来一只狗</button>
</template><script lang="ts">
import { defineComponent } from 'vue'export default defineComponent({name: 'App'
})
</script><script setup lang="ts">
import useSum from '../hooks/useSum'
import useDog from '../hooks/useDog'let { sum, increment, decrement } = useSum()
let { dogList, getDog } = useDog()
</script>
<style>
.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
button {margin: 0px 5px;
}
</style>

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

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

相关文章

开源AI智能名片S2B2C商城系统:移动技术的深度整合与应用

在数字化营销的新时代&#xff0c;开源AI智能名片S2B2C商城系统通过深度整合移动技术MAC ID、Beacon和DSP&#xff0c;为企业带来了前所未有的营销机遇。这一系统不仅提高了营销效率&#xff0c;还极大地提升了客户体验&#xff0c;并有效降低了营销成本。下面&#xff0c;我们…

【JAVA基础之反射】反射详解

&#x1f525;作者主页&#xff1a;小林同学的学习笔录 &#x1f525;mysql专栏&#xff1a;小林同学的专栏 1.反射 1.1 概述 是在运行状态中&#xff0c;对于任意一个类&#xff0c;都能够知道这个类的所有属性和方法&#xff1b; 对于任意一个对象&#xff0c;都能够调用它…

SQL注入漏洞扫描---sqlmap

what SQLMap是一款先进的自动执行SQL注入的审计工具。当给定一个URL时&#xff0c;SQLMap会执行以下操作&#xff1a; 判断可注入的参数。判断可以用哪种SQL注入技术来注入。识别出目标使用哪种数据库。根据用户的选择&#xff0c;读取哪些数据库中的数据。 更详细语法请参考…

BJFUOJ-C++程序设计-实验3-继承和虚函数

A TableTennisPlayer 答案&#xff1a; #include<iostream> #include<cstring> using namespace std;class TableTennisPlayer{ private:string firstname;string lastname;bool hasTable;public:TableTennisPlayer(const string &, const string &, bool…

leetCode65. 有效数字

leetCode65. 有效数字 题目思路 代码 class Solution { public:bool isNumber(string s) {int l 0, r s.size() - 1;// 1.忽略前后的空格while(l < r && s[l] ) l;while(l < r && s[r] ) r--;if(l > r) return false;s s.substr(l,r - l 1)…

Git的基本操作和使用

git分支指令 列出所有本地分支 git branchmaster是绿的 前面有个 表示当前分支是master* 列出所有远程分支 git branch -r列出所有本地分支和远程分支 git branch -a新建一个分支&#xff0c;但依然停留在当前分支 git branch [branch-name]新建一个分支&#xff0c;并切…

httpcanary抓包某游戏思路及教程[第1期]

游戏介绍&#xff1a; 这期在线读档0花购买教程&#xff0c;存档版教程。下一期在线购买无限鲜花累计充值安卓全系统适配修改教程。 小白勿入&#xff0c;技术流资料 网盘自动获取 链接&#xff1a;https://pan.baidu.com/s/1lpzKPim76qettahxvxtjaQ?pwd0b8x 提取码&#x…

设计模式动态代理

什么是设计模式? 一个问题通常有n种解法&#xff0c;其中肯定有一种解法是最优的&#xff0c;这个最优的解法被人总结出来了&#xff0c;称之为设计模式。 设计模式有20多种&#xff0c;对应20多种软件开发中会遇到的问题。 关于设计模式的学习&#xff0c;主要学什么&#…

onedrive下載zip檔案有20G限制,如何解決

一般來說&#xff0c;OneDrive網頁版對文件下載大小的限制如下圖所示&#xff0c;更多資訊&#xff0c;請您參考這篇文章&#xff1a;OneDrive 和 SharePoint 中的限制 - Microsoft Support 因此我們推薦您使用OneDrive同步用戶端來同步到本地電腦&#xff0c;您也可以選擇只同…

MFC 列表控件删除实例(源码下载)

1、本程序基于前期我的博客文章《MFC下拉菜单打钩图标存取实例&#xff08;源码下载) 》 2、程序功能选中列表控件某一项&#xff0c;删除按钮由禁止变为可用&#xff0c;点击删除按钮&#xff0c;选中的项将删除。 3、首先在主界面添加一个删除参数按钮。 4、在myDlg.cpp 文件…

巨人网络发布2023年年报:全力拥抱AI浪潮,开启游戏产业新篇章

易采游戏网5月3日消息&#xff0c;国内知名游戏公司巨人网络发布了其2023年度财务报告&#xff0c;报告显示&#xff0c;公司在过去一年中积极拥抱AI技术&#xff0c;实现了业绩的稳步增长&#xff0c;为游戏产业带来了新的活力与机遇。 在报告中&#xff0c;巨人网络详细阐述了…

【C++】STL简介

&#x1f525;个人主页&#xff1a; Forcible Bug Maker &#x1f525;专栏&#xff1a; C 目录 前言什么是STL&#xff1f;STL的历史STL的版本STL六大组件STL的优缺点STL的优点&#xff1a;STL的缺点&#xff1a; 如何学习STL结语 前言 本篇博客主要内容&#xff1a;STL简介。…

240503-关于Unity的二三事

240503-关于Unity的二三事 1 常用快捷键 快捷键描述CtrlP播放/停止Ctrl1打开Scene窗口Ctrl2打开Game窗口Ctrl3打开Inspect窗口Ctrl4打开Hierarchy窗口Ctrl5打开Project窗口Ctrl6打开Animation窗口 2 关联VisualStudio2022 3 节约时间&#xff1a;将最新声明的参数移动到最上…

解决wget报错:ERROR 403: Forbidden.

原因&#xff1a; 服务器正在检查引用者&#xff0c;部分 HTTP 请求会得到错误响应。不以 Mozilla 开头或不包含 Wget 的用户代理的请求会被拒绝。 解决方案&#xff1a; wget --user-agent“Mozilla” 要下载的链接 如&#xff1a; wget --user-agent"Mozilla" …

jvm垃圾回收机制介绍

JVM&#xff08;Java虚拟机&#xff09;是Java程序的运行环境&#xff0c;它负责执行字节码文件。JVM的工作原理主要包括以下几个部分&#xff1a;类加载器、执行引擎、垃圾收集器和内存管理。类加载器负责加载字节码文件并将其转换成Java平台上的机器码&#xff0c;执行引擎负…

java入门-日期类

日期类 Date类 Date类表示特定的时间&#xff0c;可以精确到毫秒。 获取Date对象 Date date new Date(); 构造方法 /*** Allocates a <code>Date</code> object and initializes it so that* it represents the time at which it was allocated, measured to…

k8s笔记 | Ingress

安装Ingress 添加helm创库 Installation Guide - Ingress-Nginx Controller Ingress | Kubernetes 下载包 将 文件helm 放到 /usr/local/bin/ 并给到执行权限 # 添加可执行权限 chmod ux helm # 测试是否能运行 helm version# 结果 version.BuildInfo{Version:"v3.14…

详细分析Java中的敏感词过滤(附Demo)

目录 前言1. 简易Demo2. 进阶Demo 前言 敏感词直接过滤&#xff0c;有效防止敏感信息的上传 本文主要给一个启发的思路 1. 简易Demo 通过简易的Demo机制了解基本原理 import java.util.HashSet; import java.util.Set;public class test {private Set<String> sensi…

基于STM32的最小系统电路设计(STM32F103C8T6为例)

前言&#xff1a;本篇博客为嵌入式硬件领域的文章&#xff0c;对 STM32 的最小系统电路设计进行教学。本篇博客以嘉立创 EDA&#xff08;标准版&#xff09;进行绘制 STM32F103C8T6 的最小系统电路 PCB 板&#xff0c;STM32 的最小系统通常包括&#xff1a;微控制器、时钟电路、…

python从0开始学习

目录 前言 1、print函数 2、input函数 3、保留字和标识符 总结 前言 本篇文章我们开辟一个新的学习模块&#xff1a;python。python是一个十分简洁实用的编程语言&#xff0c;我们将从0开始学习python 1、print函数 print(*args, sep , end\n, fileNone, flushFalse) pytho…