vue3+ts学习记录

说明

本文是学习 小满zs 大佬的vue3教程所做笔记，感谢大佬发布的教程。
学习地址：https://xiaoman.blog.csdn.net/article/details/122768533?spm=1001.2014.3001.5502

watch

watch监听器可以监听变化但是默认是不进行第一次触发的监听的想要监听第一次的变化需要设置第三个参数，对象中的imediate属性

let a=ref(0)
// 第一个参数如果是响应式数据可以直接传入，如果想监听里面的某个属性则第一个参数必须传入回调函数，如()=>{a.value}
watch(a,(newValue,oldValue)=>{console.log(newValue),{
deep:true
imediate:true
}})

默认props值的设置

可以通过widthDefaults属性设置未传入的props属性的默认的值

拿到子组件暴露的某些属性值

我们可以通过某些方法拿到子组件，如下
html

<div>
	<ChildrenComp ref="lala"></ChildrenComp>
</div>

// lala拿到的就是ChildrenComp对象
let lala = ref(null)
// 我们想访问lala里暴露的一些属性就需要它有暴露，不然这里打印出来的是一个空的porxy对象，target没暴露东西
console.log(lala.value)

这个时候我们可以在子组件里面暴露一些内容，父组件就可以访问到了，具体暴露代码如下,在children子组件内容：

defineExpose({
	data
})

泽阳在父组件就能访问到data了。

异步组件与分包

vite打包后的ventdor.js文件是一些组件的包，比如用到得axios，elementUI等。请求时，如果我们页面过大，白屏时间会很长，这时候可以做异步组件。还有一种情况就是子组件本身是异步的，通过promise拿数据的，父组件也需要做异步处理，否则子组件异步的东西显示不出来（maybe）.
父组件异步加载子组件的方式如下，以下是父组件代码：

const AComp=defineAsyncComponent(()=>import("@/components/AComp/index.vue"))

这时候引入组件的部分也需要进行修改，用vue自带的组件Suspense组件包裹异步组件，代码如下

<Suspense>
	<template #default>
		<AComp></AComp>
	</template>
	<template #fallback>
		<!--异步组件没加载出来时显示的内容-->
		<div>...loading</div>
	</template>
</Suspense>

传送门Teleport

该组件可以让元素样式挂载到某个元素下，如挂载body，它定位的时候就能相对body定位。具体怎么用还不知道，遇到的ant modal得去改全局样式的问题好像用它也解决不了。代码如下：

<Teleport to="#app">
	<div></div>
</Teleport>

keep-alive的两个生命周期

这里只说vue3setup语法糖里的生命周期，keep-alive里的组件在显示和消失时，虽然不会走unMounted(卸载) 但是会走两个新的生命周期钩子 onActivated和onDeactivated 其中第一次加载时 onActivated在onMounted 之后
他还能指定特定的组件进行缓存，另一个不缓存，通过 :include=[‘组件名’]
或者指定特定的组件不进行缓存，通过:exclude=[‘组件名’]

官方有些自带的东西

组件通过 userAttrs 可以获取 调用该组件时 设置的所有标签属性
还有 userSlots

自定义全局函数变量

在 main.js 中添加如下代码，定义 $filters 命令

app.config.globleProperties.$filters={
	format<T>(str:T):string{
		return `真·${str}`
	}
}

在组件中应用时写 $filters.format(“你好”) 就会返回 真·你好 但是组件内引用会报错，因为没有声明，现在我们继续在main.js中声明，在刚才代码的上面写如下代码：

type Filter = {
	format<T>(str:T)=>string
}
declare module '@vue/runtime-core'{
	export interface ComponentCustomPropertise{
		$filters:Filter
	}
}

CSS选择器

:deep() 样式穿透
:slotted() 插槽
:global() 全局选择器

动态CSS

可以将js代码作为css的值设置，通过在css中写v-bind，代码如下

<script setup lang="ts">
import {ref} from "vue";
// 普通字符串
const bgcolor = ref("red")
// 也可以是对象,但是css需要放引号里调用，请看css color
const col = ref({
	color:"blue"
})
</script>

<template>
  <div class="div">
    动态css
  </div>
</template>

<style scoped>
.div{
	// 字符串变量的引用方式
	background-color:v-bind(bgcolor)
	// 对象变量的引用方式
	color: v-bind('col.color')
}
</style>

nextTick用法

有的时候用变量的时候响应式的数据或者视图还没更新呢，得等更新完用新数据，这时候可以用nextTick。代码如下:

const message = ref("你好")
// async是因为nextTick加的
const onchange = async()=>{
	message.value = ”你好呀“
	// 加nextTick让下面的代码等更新完执行
	await nextTick()
	// 如果不加nextTick这里显示的就是 你好
	console.log(message.value)
}

自动生成ts类型

json2ts

vsvode搜索方法的

command+T 搜索