总结（尚硅谷Vue3入门到实战，最新版vue3+TypeScript前端开发教程）
1.Vue简介
2020年9月18日，Vue.js发布版3.0版本，代号：One Piece
1.1.性能的提升
打包大小减少41%。
初次渲染快55%, 更新渲染快133%。
内存减少54%。
1.2.源码的升级
使用Proxy代替defineProperty实现响应式。
重写虚拟DOM的实现和Tree-Shaking。
1.3.拥抱TypeScript
Vue3可以更好的支持TypeScript。
1.4 新的特性
ref和reactive
新的生命周期函数
2.创建Vue3工程
基于 vite 创建（推荐）
## 1.创建命令
npm create vue@latest
## 2.具体配置
## 配置项目名称
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript? Yes
## 是否添加JSX支持
√ Add JSX Support? No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development? No
## 是否添加pinia环境
√ Add Pinia for state management? No
## 是否添加单元测试
√ Add Vitest for Unit Testing? No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No
## 是否添加ESLint语法检查
√ Add ESLint for code quality? Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting? No3.Vue3核心语法
3.1.OptionsAPI 与 CompositionAPI
Vue2的APi设计是Options（配置）风格，Vue3则是Composition（组合）风格，让相关功能的代码更加有序的组合在一起
3.2.setup
概述
注意：setup函数中访问this是undefined
所有值和函数都可以定义到setup函数中，但需要通过return“交出去”出来让外界使用
<template>
<div class="person">
<h2>姓名：{{name}}</h2>
<h2>年龄：{{age}}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">年龄+1</button>
<button @click="showTel">点我查看联系方式</button>
</div>
</template>
<script lang="ts">
export default {
name:'Person',
setup(){
// 数据，原来写在data中（注意：此时的name、age、tel数据都不是响应式数据）
let name = '张三'
let age = 18
let tel = '13888888888'
// 方法，原来写在methods中
function changeName(){
name = 'zhang-san' //注意：此时这么修改name页面是不变化的
console.log(name)
}
function changeAge(){
age += 1 //注意：此时这么修改age页面是不变化的
console.log(age)
}
function showTel(){
alert(tel)
}
// 返回一个对象，对象中的内容，模板中可以直接使用
return {name,age,tel,changeName,changeAge,showTel}
}
}
</script>setup返回值
如果时返回一个对象则正常被调用
如果返回是一个函数，则会自动挂载，无关模板
setup(){
return ()=> '你好啊！'
}setup语法糖
一般来说需要使用vite插件简化
step1：npm i vite-plugin-vue-setup-extend -D
step2：修改vite.config.ts
import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig({
plugins: [ VueSetupExtend() ]
})step3：直接<script setup lang="ts" name="Person">
3.3.ref 创建：基本类型的响应式数据
import {ref} from 'vue'语法：let age = ref(初始值)，
返回值：是RefImpl的实例对象，简称ref对象，ref对象的value属性是响应式的
注意
1.js中操作响应式对象需要用 xx.value ,在模板中直接用即可，无需.value
2.对于 let age = ref(18)来说，age不是响应式的，age.value是响应式的
3.4.reactive 创建：对象类型的响应式数据
import { reactive } from 'vue'语法：iet 响应式对象 = reactive(源对象)
返回值：proxy的实例对象，简称响应式对象
注意.reactive不能定义基本数据类型
3.5.ref 创建：对象类型的响应式数据
若ref接收的是对象类型，内部其实也是调用了reactive函数。
注意：调用对象的属性应该是 xx.value.属性
代码能证明一切
<template>
<div class="person">
<h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
<h2>游戏列表：</h2>
<ul>
<li v-for="g in games" :key="g.id">{{ g.name }}</li>
</ul>
<h2>测试：{{obj.a.b.c.d}}</h2>
<button @click="changeCarPrice">修改汽车价格</button>
<button @click="changeFirstGame">修改第一游戏</button>
<button @click="test">测试</button>
</div>
</template>
<script lang="ts" setup name="Person">
import { ref } from 'vue'
// 数据
let car = ref({ brand: '奔驰', price: 100 })
let games = ref([
{ id: 'ahsgdyfa01', name: '英雄联盟' },
{ id: 'ahsgdyfa02', name: '王者荣耀' },
{ id: 'ahsgdyfa03', name: '原神' }
])
console.log(car)
function changeCarPrice() {
car.value.price += 10
}
function changeFirstGame() {
games.value[0].name = '流星蝴蝶剑'
}
function test(){
obj.value.a.b.c.d = 999
}
</script>3.6.ref 对比 reactive
使用原则：
- 若需要一个基本类型的响应式数据，必须使用
ref。 - 若需要一个响应式对象，层级不深，
ref、reactive都可以。 - 若需要一个响应式对象，且层级较深，推荐使用
reactive。
注意：reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）
let stu = reactive({name:'张三',age:18})
stu = {name:'王五',age:19}//这样会失去响应式，
//可以使用Object.assign整体替换
Object.assign(stu,{'王五' ，19})
3.7 toRefs 与 toRef
作用：将一个响应式对象中的所有属性转化为ref对象
注意：toRefs与toRef功能一致，但toRefs可以批量转换。
<template>
<div class="person">
<h2>姓名：{{person.name}}</h2>
<h2>年龄：{{person.age}}</h2>
<h2>性别：{{person.gender}}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="changeGender">修改性别</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {ref,reactive,toRefs,toRef} from 'vue'
// 数据
let person = reactive({name:'张三', age:18, gender:'男'})
// 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力
let {name,gender} = toRefs(person)
// 通过toRef将person对象中的gender属性取出，且依然保持响应式的能力
let age = toRef(person,'age')
// 方法
function changeName(){
name.value += '~'
}
function changeAge(){
age.value += 1
}
function changeGender(){
gender.value = '女'
}
</script>3.8.computed
只有待计算的值发生改变，computed才可以重新计算一次（比较聪明）
默认计算的值是只读的，只有当写上get（）和set（）方法，计算出来的值才是可读可写的
<script setup lang="ts" name="App">
import {ref,computed} from 'vue'
let firstName = ref('zhang')
let lastName = ref('san')
// 计算属性——只读取，不修改
/* let fullName = computed(()=>{
return firstName.value + '-' + lastName.value
}) */
// 计算属性——既读取又修改
let fullName = computed({
// 读取
get(){
return firstName.value + '-' + lastName.value
},
// 修改
set(val){
console.log('有人修改了fullName',val)
firstName.value = val.split('-')[0]
lastName.value = val.split('-')[1]
}
})
//因为前面有了set方法，所以现在可读可写
fullName.vaule = 'li-si'
</script>3.9. watch
情况一：监视ref定义的基本类型数据
监视函数watch中直接写基本类型，无需加 ‘.value’
<template>
<div class="watch">
<h1>{{sum}}</h1>
<button @click="changeSum">加一</button>
</div>
</template>
<script lang="ts" setup name="watch">
import{ref,watch} from 'vue'
let sum = ref(0)
function changeSum(){
sum.value+=1
}
//直接监视
watch(sum,(newValue,oldValue)=>{
console.log('变化了')
})
//有返回值，返回值是一个结束监视函数
const stopWatch = watch(sum ,(newValue,oldValue)=>{
if(sum.value>10){
stopWatch()
}
})
</script>情况2： 监视ref定义的对象类型数据
默认当对象的某一个属性变化时，不会触发监视函数回调，只有当整个对象变化（地址值变化）才会响应，但是可以开启深度监视
/*
监视，情况一：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视
watch的第一个参数是：被监视的数据
watch的第二个参数是：监视的回调
watch的第三个参数是：配置对象（deep、immediate等等.....）
*/
watch(person,(newValue,oldValue)=>{
console.log('person变化了',newValue,oldValue)
},{deep:true})情况3：监视reactive定义的对象类型数据
和情况2类似，但是默认开启深度监视
情况4：监视ref和reactive定义的对象类型中的某个属性
1.若该属性不是对象类型，需要写成函数形式
2.是对象类型，可以直接写
// 监视，情况四：监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式
watch(()=> person.name,(newValue,oldValue)=>{
console.log('person.name变化了',newValue,oldValue)
})
// 监视，情况四：监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数
watch(()=>person.car,(newValue,oldValue)=>{
console.log('person.car变化了',newValue,oldValue)
},{deep:true})情况5：监视多个属性
// 监视，情况五：监视上述的多个数据
watch([()=>person.name,person.car],(newValue,oldValue)=>{
console.log('person.car变化了',newValue,oldValue)
},{deep:true})3.10. watchEffect
不用指明监视的属性，函数用到哪个监视哪个
const stopWtach = watchEffect(()=>{
// 室温达到50℃，或水位达到20cm，立刻联系服务器
if(temp.value >= 50 || height.value >= 20){
console.log(document.getElementById('demo')?.innerText)
console.log('联系服务器')
}
// 水温达到100，或水位达到50，取消监视
if(temp.value === 100 || height.value === 50){
console.log('清理了')
stopWtach()
}
})3.11.标签的ref属性
不同组件的即使有相同的ref也不会冲突
定位到组件上，如果想要取消保护机制，暴露属性可以用defineExpose
<!-- 子组件Person.vue中要使用defineExpose暴露内容 -->
<script lang="ts" setup name="Person">
import {ref,defineExpose} from 'vue'
// 数据
let name = ref('张三')
let age = ref(18)
/****************************/
/****************************/
// 使用defineExpose将组件中的数据交给外部
defineExpose({name,age})
</script>补充：接口定义和使用
定义
// 定义一个接口，限制每个Person对象的格式
export interface PersonInter {
id:string,
name:string,
age:number
}
// 定义一个自定义类型Persons
export type Persons = Array<PersonInter>使用
import {type PersonInter} from './types'
import {type Persons} from './types'
let person:PersonInter = {id:'asyud7asfd01',name:张三',age:60}
let personList:Array<PersonInter> = [
{id:'asyud7asfd01',name:'张三',age:60},
{id:'asyud7asfd02',name:"李四',age:18},
{id: asyud7asfd03',name:'王五',age:5}]
let persons = reactive<Persons>([
{id:'e98219e12',name:'张三',age:18},
{id:'e98219e13',name:'李四',age:19},
{id:'e98219e14',name:'王五',age:20}
])3.12. props
让父组件能够向子组件传递数据。
<h2 a="1+1" :b="1+1" c="x" :d="x" ref="qwe"></h2>
<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'])
// 第二种写法：接收+限制类型
const props = defineProps<{list:Persons}>()
// 第三种写法：接收+限制类型+指定默认值+限制必要性
let props = withDefaults(defineProps<{list?:Persons}>(),{
list:()=>[{id:'asdasg01',name:'小猪佩奇',age:18}]
})
console.log(props)
</script>3.12.生命周期
注意：使用时候需要从vue中impoort
创建阶段：setup
挂载阶段：onBeforeMount、onMounted
更新阶段：onBeforeUpdate、onUpdated
卸载阶段：onBeforeUnmount、onUnmounted
3.13.自定义hook
可以在src下创建hooks文件夹存放hook文件，命名一般为“useXxx",把具有联系的值和函数存放到一个文件夹
例如
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.urlList" :key="index" :src="(u as string)">
<span v-show="dogList.isLoading">加载中......</span><br>
<button @click="getDog">再来一只狗</button>
</template>
<script setup lang="ts">
import useSum from './hooks/useSum'
import useDog from './hooks/useDog'
let {sum,increment,decrement} = useSum()
let {dogList,getDog} = useDog()
</script>4.路由
4.1.配置
router文件下配置
import {createRouter,createWebHistory} from "vue-router"
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'
const router = createRouter({
history:createWebHistory(),
routes:[
{
path:'/home'
component:Home
},
{
}
]
})main.ts文件
import router from './router/index'
app.use(router)
app.mount('#app')App.vue文件
注意<RouterLink to=' '></RouterLink> 和<RouterView><RouterView>
路由组件通常存放在
pages或views文件夹，一般组件通常存放在components文件夹。通过点击导航，视觉效果上“消失” 了的路由组件，默认是被卸载掉的，需要的时候再去挂载。
<template>
<div class="app">
<h2 class="title">Vue路由测试</h2>
<!-- 导航区 -->
<div class="navigate">
<RouterLink to="/home" active-class="active">首页</RouterLink>
<RouterLink to="/news" active-class="active">新闻</RouterLink>
<RouterLink to="/about" active-class="active">关于</RouterLink>
</div>
<!-- 展示区 -->
<div class="main-content">
<RouterView></RouterView>
</div>
</div>
</template>
<script lang="ts" setup name="App">
import {RouterLink,RouterView} from 'vue-router'
</script>4.2.路由器工作模式
history模式
优点：
URL更加美观，不带有#，更接近传统的网站URL。缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有
404错误。
const router = createRouter({
history:createWebHistory(), //history模式
/******/
})hash模式
优点：兼容性更好，因为不需要服务器端处理路径。
缺点：
URL带有#不太美观，且在SEO优化方面相对较差
const router = createRouter({
history:createWebHashHistory(), //hash模式
/******/
})4.3.to的两种写法
<RouterLink to="/home">主页</RouterLink>
<RouterLink to="{path:'/home'}">主页</RouterLink>4.4.命名路由
在路由表中添加name属性
可以通过<RouterLink to="{name:'zhuye'}"><RouterLink>直接跳转
4.5.嵌套路由（子路由）
在一个路由下面增加children属性，再写入其他路由
const router = createRouter({
history:createWebHistory(),
routes:[
{
name:'zhuye',
path:'/home',
component:Home
},
{
name:'xinwen',
path:'/news',
component:News,
children:[
{
name:'xiang',
path:'detail',
component:Detail
}
]
},
{
name:'guanyu',
path:'/about',
component:About
}
]
})
export default router4.6.路由传参
query参数
-
传递参数
<!-- 跳转并携带query参数（to的字符串写法） --> <router-link to="/news/detail?a=1&b=2&content=欢迎你"> 跳转 </router-link> <!-- 跳转并携带query参数（to的对象写法） --> <RouterLink :to="{ //name:'xiang', //用name也可以跳转 path:'/news/detail', query:{ id:news.id, title:news.title, content:news.content } }" > {{news.title}} </RouterLink> -
接收参数：
import{useRoute} from 'vue-router' const route = useRoute() console.log(route.query)
params参数
-
传递参数
<!-- 跳转并携带params参数（to的字符串写法） --> <RouterLink :to="`/news/detail/001/新闻001/内容001`">{{news.title}}</RouterLink> <!-- 跳转并携带params参数（to的对象写法） --> <RouterLink :to="{ name:'xiang', //用name跳转 params:{ id:news.id, title:news.title, content:news.title } }" > {{news.title}} </RouterLink> -
接收参数：
import {useRoute} from 'vue-router' const route = useRoute() // 打印params参数 console.log(route.params)
3.占位
[name:'xinwen',
path:'/news',
component:News,
children:[
name:'xiang',
//占位！！！！
path: 'detail/:id/:title/:content',
component:Detail[
]注意
备注1：传递
params参数时，若使用to的对象写法，必须使用name配置项，不能用path。备注2：传递
params参数时，需要提前在规则中占位。
4.7. 路由的prop配置
使传参更优雅
{
name:'xiang',
path:'detail/:id/:title/:content',
component:Detail,
// props的对象写法，作用：把对象中的每一组key-value作为props传给Detail组件
// props:{a:1,b:2,c:3},
// props的布尔值写法，作用：把收到了每一组params参数，作为props传给Detail组件
// props:true
// props的函数写法，作用：把返回的对象中每一组key-value作为props传给Detail组件
props(route){
return route.query
}
}4.8.replace属性
控制路由跳转时操作浏览器历史记录模式
浏览器的历史记录有两种写入方式：分别为
push和replace：
push是追加历史记录（默认值）。replace是替换当前记录。开启
replace模式：<RouterLink replace .......>News</RouterLink>
4.9.编程式导航
在vue3中，$route和$router变成了两个hook，就是在导航区以外的地方通过一些操作实现路由跳转
<template>
<div>
当前路由路径: {{ route.path }}
</div>
</template>
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
</script><template>
<button @click="goToHome">前往首页</button>
</template>
<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const goToHome = () => {
router.push('/home');
};
</script>补充知识点，定时任务
//挂载后，页面三秒自动跳转
onMounted(()=>{
router.push('/home')
},3000)4.10.重定向
将特定的路径，重新定向到已经有的路由,通过redirect
[
path:'/',
redirect:'/about'
]5.pinia
5.1.搭建环境
step1：npm install pinia
step2:操作 src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
/* 引入createPinia，用于创建pinia */
import { createPinia } from 'pinia'
/* 创建pinia */
const pinia = createPinia()
const app = createApp(App)
/* 使用插件 */{}
app.use(pinia)
app.mount('#app')5.2.存储+读取数据
store是pinia的一个功能部件，我的理解是可以提取公共的数据或者函数供其他组件使用
在src/store中创建文件
具体编码src/store/count.ts
//引入defineStore用于创建store
import {defineStore} from 'pinia'
//定义并暴露一个store
export const useCountstore = defineStore('count',{
//动作
actions:{},
//状态
state(){
return {
sum:6
}
},
//计算
getters:{}
})使用
<template>
<h1>当前的求和为：{{countStore.sum}}</h1>
</template>
<script setup lang="ts" name="count">
//引入对应的useXxxStore
import {useCountStore} from '@/src/store/count'
//调用对应的useXxxStore得到对应的store
const countStore = useCountStore()
</script>5.3.修改数据
1.直接在调用的地方加（vue3特性）
countStore.sum = 666
2.批量修改，通过patch函数
countStore.$patch({
sum:999
age:111
})
3.通过store里面的action创建修改store数据的方法
import {defineStore} from 'pinia'
export const useCountStore = defineStore('count' ,{
actions: {
//加
increment(value:number) {
if (this.sum < 10) {
//操作countStore中的sum
this.sum += value
}
},
//减
decrement(value:number){
if(this.sum > 1){
this.sum -= value
}
}
},
/*************/
})5.4.storeToRefs
借助storeToRefs会将store中的数据转化为ref对象，而store中的函数不变
通过toRefs会将store的所有都转化为ref对象，包括函数
<template>
<div class="count">
<h2>当前求和为：{{sum}}</h2>
</div>
</template>
<script setup lang="ts" name="Count">
import { useCountStore } from '@/store/count'
/* 引入storeToRefs */
import { storeToRefs } from 'pinia'
/* 得到countStore */
const countStore = useCountStore()
/* 使用storeToRefs转换countStore，随后解构 */
const {sum} = storeToRefs(countStore)
</script>5.5.getters
当state中的数据，需要经过处理后再使用时，可以使用getters配置。{感觉有点鸡肋，在state不是也可以吗}，，记得在使用时和state一起import
// 引入defineStore用于创建store
import {defineStore} from 'pinia'
// 定义并暴露一个store
export const useCountStore = defineStore('count',{
// 动作
actions:{
/************/
},
// 状态
state(){
return {
sum:1,
school:'atguigu'
}
},
// 计算
getters:{
bigSum:(state):number => state.sum *10,
upperSchool():string{
return this. school.toUpperCase()
}
}
})5.6.$subscribe
监视变化，和watch类似
mutate:关于状态变化的信息
state:最新的state对象
talkStore.$subscribe((mutate,state)=>{
console.log('LoveTalk',mutate,state)
})5.7.store组合式写法
将数据和方法写在一个函数里面，别忘了最后需要return交出去
import {defineStore} from 'pinia'
import { ref } from 'vue';
export const useSumStore = defineStore('sum' ,()=>{
const sum = ref(999)
function add(){
sum.value++
}
return {sum,add}
})6.组件通信
6.1.props
父传子，引入子组件的时候直接附带需要传递的值
父传子
<template>
<div class="father">
<h3>父组件，</h3>
<Child :car="car" :getToy="getToy"/>
</div>
</template>
<script setup lang="ts" name="Father">
import Child from './Child.vue'
import { ref } from "vue";
// 数据
const car = ref('奔驰')
</script>子接受，通过defineProps
defineProps(['car'])
子传父，需要通过父传递的函数把值传递给父，就像父定义了一个构造函数，但是由子来调用这个构造函数从而获取具体的值
子调用父的函数
<template>
<div class="child">
<h3>子组件</h3>
<h4>我的玩具：{{ toy }}</h4>
<button @click="getToy(toy)">玩具给父亲</button>
</div>
</template>
<script setup lang="ts" name="Child">
import { ref } from "vue";
const toy = ref('奥特曼')
defineProps(['getToy'])
</script>父通过子调用函数获取值
<template>
<div class="father">
<h3>父组件，</h3>
<h4>儿子给的玩具：{{ toy }}</h4>
<Child :getToy="getToy"/>
</div>
</template>
<script setup lang="ts" name="Father">
import Child from './Child.vue'
import { ref } from "vue";
// 数据
const toy = ref()
// 方法
function getToy(value:string){
toy.value = value
}
</script>6.2 自定义事件
我认为这又有点像一种高级的监听机制，父组件在子组件绑定一个事件并声明一个回调函数，只要子组件发生这个事件，父组件就会调用这个回调函数，并且还会受到子组件的值
主要是注意一些格式，子组件在接受事件的时候 通过const emits = defineEmits(['send-toy'])
使用时通过emit('send-toy' ,toy)来响应事件，从而时父组件接受事件附带的值并执行回调函数
6.3mitt
好像一个第三方的自定义事件功能，接收数据者定义事件，提供数据者触发事件，相比自定义事件，更“自由灵活”
step1：npm i mitt
step2:在util文件夹中创建emitter.ts
//引入emit
import mitt from "mitt"
//创建emitter
const emitter = mitt()
//创建并暴露mitt
export default emitter绑定事件
emitter.on('send-toy' (value)=>{ console.log("接受value并执行回调函数")})
触发事件
emitter.emit('send-toy' ,666)
注意，在组件卸载时候，尽量解绑当前组件绑定的事件，避免消耗内存
onUmMounted(()=>{ emitter.off('send-toy')})
6.4.v-model
v-model的本质
<!-- 使用v-model指令 -->
<input type="text" v-model="userName">
<!-- v-model的本质是下面这行代码 -->
<input
type="text"
:value="userName"
@input="userName =(<HTMLInputElement>$event.target).value"
>
6.5.$attrs
通常用于父与孙的传递，但是中间的桥梁是子组件，
具体说明：$attrs是一个对象，包含所有父组件传入的标签属性。（个人理解：动态的资源集合）
注意：$attrs会排除props中已经声明的属性（相当于已经被用了），但把剩下的仍在$attrs中
父组件
<template>
<div class="father">
<h3>父组件</h3>
<Child :a="a" :b="b" :c="c" :d="d" v-bind="{x:100,y:200}" :updateA="updateA"/>
</div>
</template>
<script setup lang="ts" name="Father">
import Child from './Child.vue'
import { ref } from "vue";
let a = ref(1)
let b = ref(2)
let c = ref(3)
let d = ref(4)
function updateA(value){
a.value = value
}
</script>子组件
<template>
<div class="child">
<h3>子组件</h3>
<GrandChild v-bind="$attrs"/>
</div>
</template>
<script setup lang="ts" name="Child">
import GrandChild from './GrandChild.vue'
</script>孙组件
<template>
<div class="grand-child">
<h3>孙组件</h3>
<h4>a：{{ a }}</h4>
<h4>b：{{ b }}</h4>
<h4>c：{{ c }}</h4>
<h4>d：{{ d }}</h4>
<h4>x：{{ x }}</h4>
<h4>y：{{ y }}</h4>
<button @click="updateA(666)">点我更新A</button>
</div>
</template>
<script setup lang="ts" name="GrandChild">
defineProps(['a','b','c','d','x','y','updateA'])
</script>6.6.$refs,$parent
-
概述：
$refs用于 ：父→子。$parent用于：子→父。
-
原理如下：
属性 说明 $refs值为对象，包含所有被 ref属性标识的DOM元素或组件实例。$parent值为对象，当前组件的父组件实例对象。
但是需要用 defineExpose暴露出去，使用时候不需要显式传递，直接用
6.7. provide和inject
- 在祖先组件中通过
provide配置向后代组件提供数据 - 在后代组件中通过
inject配置来声明接收数据
在父组件中，通过provide提供数据
<template>
<div class="father">
<h3>父组件</h3>
<Child/>
</div>
</template>
<script setup lang="ts" name="Father">
import Child from './Child.vue'
import { ref,reactive,provide } from "vue";
// 数据
let money = ref(100)
let car = reactive({
brand:'奔驰',
price:100
})
// 用于更新money的方法
function updateMoney(value:number){
money.value += value
}
// 提供数据
provide('moneyContext',{money,updateMoney})
provide('car',car)
</script>后代中通过inject接受数据，尽量代码有默认值
<template>
<div class="grand-child">
<h3>我是孙组件</h3>
<h4>资产：{{ money }}</h4>
<h4>汽车：{{ car }}</h4>
<button @click="updateMoney(6)">点我</button>
</div>
</template>
<script setup lang="ts" name="GrandChild">
import { inject } from 'vue';
// 注入数据
let {money,updateMoney} = inject('moneyContext',{money:0,updateMoney:(x:number)=>{}})
let car = inject('car')
6.7.solt
1.默认插槽
父组件在声明子组件时会传递一些供以显示的数据，这时候用插槽为这些数据的显示提供位置
父组件中：
<Category title="今日热门游戏">
<ul>
<li v-for="g in games" :key="g.id">{{ g.name }}</li>
</ul>
</Category>
子组件中：
<template>
<div class="item">
<h3>{{ title }}</h3>
<!-- 默认插槽 -->
<slot></slot>
</div>
</template>2.具名插槽
指定插在哪个位置，通过v-slot或者#slot
父组件中：
<Category title="今日热门游戏">
<template v-slot:s1>
<ul>
<li v-for="g in games" :key="g.id">{{ g.name }}</li>
</ul>
</template>
<template #s2>
<a href="">更多</a>
</template>
</Category>
子组件中：
<template>
<div class="item">
<h3>{{ title }}</h3>
<slot name="s1"></slot>
<slot name="s2"></slot>
</div>
</template>3.作用域插槽
数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定
子组件通过在插槽声明的位置声明数据，由使用者操作
父组件中：
<Game v-slot="params">
<!-- <Game v-slot:default="params"> -->
<!-- <Game #default="params"> -->
<ul>
<li v-for="g in params.games" :key="g.id">{{ g.name }}</li>
</ul>
</Game>
子组件中：
<template>
<div class="category">
<h2>今日游戏榜单</h2>
<slot :games="games" a="哈哈"></slot>
</div>
</template>
<script setup lang="ts" name="Category">
import {reactive} from 'vue'
let games = reactive([
{id:'asgdytsa01',name:'英雄联盟'},
{id:'asgdytsa02',name:'王者荣耀'},
{id:'asgdytsa03',name:'红色警戒'},
{id:'asgdytsa04',name:'斗罗大陆'}
])
</script>7.其他API
7.1.shallowRef 与 shallowReactive
绕开深度响应，提升性能
shallowRef
作用：创建一个响应式数据，但只对顶层【属性】进行响应式处理。
用法：
let myVar = shallowRef(initialValue);特点：只跟踪引用值的变化，不关心值内部的属性变化。
shallowReactive
作用：创建一个浅层响应式对象，只会使对象的【最顶层属性】变成响应式的，对象内部的嵌套属性则不会变成响应式的
用法：
const myObj = shallowReactive({ ... });特点：对象的顶层属性是响应式的，但嵌套对象的属性不是。
7.2.readonly 与 shallowReadonly
readonly
作用：用于创建一个对象的深只读副本。
用法：
const original = reactive({ ... }); const readOnlyCopy = readonly(original);特点：
- 对象的所有嵌套属性都将变为只读。
- 任何尝试修改这个对象的操作都会被阻止（在开发模式下，还会在控制台中发出警告）。
应用场景：
- 创建不可变的状态快照。
- 保护全局状态或配置不被修改。
shallowReadonly
作用：与
readonly类似，但只作用于对象的顶层属性。用法：
const original = reactive({ ... }); const shallowReadOnlyCopy = shallowReadonly(original);特点：
只将对象的顶层属性设置为只读，对象内部的嵌套属性仍然是可变的。
适用于只需保护对象顶层属性的场景。
7.3. toRaw 与 markRaw
toRaw
作用：用于获取一个响应式对象的原始对象， toRaw 返回的对象不再是响应式的，不会触发视图更新。
markRaw
作用：标记一个对象，使其永远不会变成响应式的。
import { reactive,toRaw,markRaw,isReactive } from "vue";
/* toRaw */
// 响应式对象
let person = reactive({name:'tony',age:18})
// 原始对象
let rawPerson = toRaw(person)
/* markRaw */
let citysd = markRaw([
{id:'asdda01',name:'北京'},
{id:'asdda02',name:'上海'},
{id:'asdda03',name:'天津'},
{id:'asdda04',name:'重庆'}
])7.4.customRef
自定义的ref，可以实现特殊的逻辑，一般把自定义的ref封装为一个hook
import {customRef } from "vue";
export default function(initValue:string,delay:number){
let msg = customRef((track,trigger)=>{
let timer:number
return {
get(){
track() // 告诉Vue数据msg很重要，要对msg持续关注，一旦变化就更新
return initValue
},
set(value){
clearTimeout(timer)
timer = setTimeout(() => {
initValue = value
trigger() //通知Vue数据msg变化了
}, delay);
}
}
})
return {msg}
}8.Vue3新组件
8.1.Teleport
将窗口移动到指定位置
<teleport to='body' >
<div class="modal" v-show="isShow">
<h2>我是一个弹窗</h2>
<p>我是弹窗中的一些内容</p>
<button @click="isShow = false">关闭弹窗</button>
</div>
</teleport>
8.2.Suspense
- 等待异步组件时渲染一些额外内容，让应用有更好的用户体验
-
<template> <div class="app"> <h3>我是App组件</h3> <Suspense> //异步组件加载完成后显示内容 <template v-slot:default> <Child/> </template> //异步组件加载过程中显示内容，加载之后消失 <template v-slot:fallback> <h3>加载中.......</h3> </template> </Suspense> </div> </template>