目录
2.1【OptionsAPI 与 CompositionAPI】
2.7.3 情况3 监视reactive定义的【对象类型】数据
2.7.4 情况4 监视ref或reactive定义的【对象类型】数据中的某个属性
2.27.2 readonly与shallowReadonly
1.创建Vue3工程
目前
vue-cli
已处于维护模式,官方推荐基于Vite
创建项目。npm是一个NodeJS包管理和分发工具,安装node.js即可
1.1【基于 vue-cli 创建】
## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 执行创建命令
vue create vue_test
## 随后选择3.x
## Choose a version of Vue.js that you want to start the project with (Use arrow keys)
## > 3.x
## 2.x
## 启动
cd vue_test
npm run serve
1.2【基于 vite 创建】(推荐)
vite
是新一代前端构建工具,官网地址:https://vitejs.cn,vite
的优势如下:
- 轻量快速的热重载(
HMR
),能实现极速的服务启动。 - 对
TypeScript
、JSX
、CSS
等支持开箱即用。 - 真正的按需编译,不再等待整个应用编译完成。
webpack
构建 与vite
构建对比图如下:
参考官方文档:https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application
##创建命令
npm create vue@latest
创建完vscode打开可以看到一下目录结构
在新建完成后env.d.ts文件中types="vite/client"可能报红,是因为没有安装依赖,使用npm i安装依赖即可,类似maven安装jar包,重启vscode即可解决,包括上图ts config.app.json等文件报红均可以解决
1.3【启动项目 】
##启动项目
npm run dev
1.4【SRC工作目录】
1.5【main.ts入口文件 】
//引入css文件
import './assets/main.css'
//引入createApp用于创建应用
import { createApp } from 'vue'
//引入App根组件
import App from './App.vue'
//创建应用并挂载到容器,容器id为app
createApp(App).mount('#app')
1.6【.vue文件】
组件文件分为三部分
<template>
html代码
</template>
<script lang="ts">
js/ts代码
</script>
<style>
样式代码
</style>
1.7【index.html默认首页】
该文件什么都可以不写,但一定要写挂载的容器和引入main.ts
<!--main.ts中使用的挂载容器,id为app-->
<div id="app"></div>
<!--引入入口文件-->
<script type="module" src="/src/main.ts"></script>
1.8【编写第一个vue组件】
<!--App.vue-->
<template>
<div class="app">
<h1>你好啊!</h1>
</div>
</template>
<script lang="ts">
export default {
name:'App' //组件名
}
</script>
<style>
.app {
background-color: #ddd;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
</style>
main.ts文件基本不变
import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount("#app")
index.html同样的写一个挂载容器和引入main.ts 即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
效果如下:
1.9【Vue3向下兼容Vue2 】
在src中创建components文件夹保存组件,App.vue可以看作是根, components下的vue可以看作是分支,需要将分支注册到根上
在conponents创建Person.vue组件
<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', //组件名
data(){
return{
name: "张三",
age: 20,
tel:18888888888
}
},
methods:{
changeName(){
this.name = 'ZhangSan'
},
changeAge(){
this.age += 1
},
showTel(){
alert(this.tel)
}
}
}
</script>
<style>
.person {
background-color: #ddd;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
</style>
在App.vue中注册Person
- 在script中使用components:{Person}注册
- 在template中将组件放在合适位置即可
<template>
<div class="app1">
<h1>你好啊!</h1>
<Person/> <!--将组件放在合适位置-->
</div>
</template>
<script lang="ts">
import Person from './components/Person.vue';
export default {
name:'App', //组件名
components:{Person} //注册Person组件
}
</script>
<style>
.app1 {
background-color: #ddd;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
</style>
效果如下:
2.Vue3核心语法
2.1【OptionsAPI 与 CompositionAPI】
Vue2
的API
设计是Options
(配置)风格的。
Options API 的弊端
Options
类型的API
,数据、方法、计算属性等,是分散在:data
、methods
、computed
中的,若想新增或者修改一个需求,就需要分别修改:data
、methods
、computed
,不便于维护和复用。
Composition API 的优势
可以用函数的方式,更加优雅的组织代码,让相关功能的代码更加有序的组织在一起。
说明:以上四张动图来自作者:大帅老猿
出自掘金:https://juejin.cn/post/6890545920883032071
2.2【setup函数】
概述
setup
是Vue3
中一个新的配置项,值是一个函数,它是Composition API
“表演的舞台”,组件中所用到的:数据、方法、计算属性、监视......等等,均配置在setup
中。
特点:
setup
函数返回的对象中的内容,可直接在模板中使用。<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
中访问this
是undefined
。<script lang="ts"> export default { name:'Person', setup(){ console.log('@@',this) } } </script>
setup
函数会在beforeCreate
之前调用,它是“领先”所有钩子执行的。(生明周期再说)
<script lang="ts">
export default {
name:'Person',
beforeCreate(){
console.log("beforeCreate")
},
setup(){
console.log("setup")
}
}
</script>
2.3【setup 与 Options API 的关系 】
Vue2
的配置(data
、methos
......)中可以访问到setup
中的属性、方法。- 但在
setup
中不能访问到Vue2
的配置(data
、methos
......)。- 如果与
Vue2
冲突,则setup
优先。
2.4 【setup语法糖 】
语法糖(Syntactic Sugar)是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语,指的是在计算机语言中添加的某种语法,这种语法对语言的功能并没有实际影响,但能更方便程序员使用该语言。
基本用法
只需在<script>里添加一个setup属性,编译时会把<script setup></script>里的代码编译成一个setup函数,且<script setup>里声明的变量和函数,不需要return暴露出去,就可以直接在template使用
<template>
<div class="person">
<h2>姓名:{{name}}</h2>
<h2>年龄:{{age}}</h2>
<button @click="changName">修改名字</button>
<button @click="changAge">年龄+1</button>
<button @click="showTel">点我查看联系方式</button>
</div>
</template>
<script lang="ts">
export default {
name:'Person',
}
</script>
<!-- 下面的写法是setup语法糖 -->
<script setup lang="ts">
console.log(this) //undefined
// 数据(注意:此时的name、age、tel都不是响应式数据)
let name = '张三'
let age = 18
let tel = '13888888888'
// 方法
function changName(){
name = '李四'//注意:此时这么修改name页面是不变化的
}
function changAge(){
console.log(age)
age += 1 //注意:此时这么修改age页面是不变化的
}
function showTel(){
alert(tel)
}
</script>
扩展1:当存在多个<script>标签时,lang属性要一致,否则报错
如下代码:
扩展2:假设需要配置组件名,但export default {name:'Person',}不能写在setup内
故需要编写一个不写
setup
的script
标签,去指定组件名字,比较麻烦,我们可以借助vite
中的插件简化
第一步:
npm i vite-plugin-vue-setup-extend -D
第二步:
配置vite.config.ts
导入插件import VueSetupExtend from 'vite-plugin-vue-setup-extend'
注入插件VueSetupExtend()
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'//导入插件
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
VueSetupExtend()//注册插件
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
第三步:
<script setup lang="ts" name="Person">
2.5【ref 与reactive 定义响应式变量】
使用setup语法后,可以看到数据并不是响应式的,ref和reactive将解决这个问题
2.5.1 ref创建:基本类型的响应式数据
作用:定义响应式变量
语法:let xxx = ref(初始值)
返回值:一个
RefImpl
的实例对象,简称ref对象
或ref
,ref
对象的value
属性是响应式的。
<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 setup lang="ts" name="Person">
import {ref} from 'vue'
// name和age是一个RefImpl的实例对象,简称ref对象,它们的value属性是响应式的。
let name = ref('张三')
let age = ref(18)
// tel就是一个普通的字符串,不是响应式的
let tel = '13888888888'
function changeName(){
// JS中操作ref对象时候需要.value
name.value = 'li-si'
console.log(name.value)
// 注意:name不是响应式的,name.value是响应式的,所以如下代码并不会引起页面的更新。
// name = ref('zhang-san')
}
function changeAge(){
// JS中操作ref对象时候需要.value
age.value += 1
console.log(age.value)
}
function showTel(){
alert(tel)
}
</script>
注意点:
JS
中操作数据需要:xxx.value
,但模板中不需要.value
,直接使用即可。- 对于
let name = ref('zhang-san')
来说,name
不是响应式的,name.value
是响应式的。
2.5.2 reactive 创建:对象类型的响应式数据
- 作用:定义一个响应式对象(不能定义基本类型,要用
ref
,否则报错)- 语法:
let 响应式对象= reactive(源对象)
。- 返回值:一个
Proxy
的实例对象,简称:响应式对象。- 注意点:
reactive
定义的响应式数据是“深层次”的。
<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 { reactive } from 'vue'
// 数据
let car = reactive({ brand: '奔驰', price: 100 })
let games = reactive([
{ id: 'ahsgdyfa01', name: '英雄联盟' },
{ id: 'ahsgdyfa02', name: '王者荣耀' },
{ id: 'ahsgdyfa03', name: '原神' }
])
let obj = reactive({
a:{
b:{
c:{
d:666
}
}
}
})
function changeCarPrice() {
car.price += 10
}
function changeFirstGame() {
games[0].name = '流星蝴蝶剑'
}
function test(){
obj.a.b.c.d = 999
}
</script>
2.53 ref 创建:对象类型的响应式数据
- 其实
ref
接收的数据可以是:基本类型、对象类型。- 若
ref
接收的是对象类型,内部其实也是调用了reactive
函数。
<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: '原神' }
])
let obj = ref({
a:{
b:{
c:{
d:666
}
}
}
})
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>
2.54 ref 对比 reactive
宏观角度看:
ref
用来定义:基本类型数据、对象类型数据;
reactive
用来定义:对象类型数据。
- 区别:
ref
创建的变量必须使用.value
(可以使用volar
插件自动添加.value
)。
reactive
重新分配一个新对象,会失去响应式(可以使用Object.assign
去整体替换)。
- 使用原则(参考):
- 若需要一个基本类型的响应式数据,必须使用
ref
。- 若需要一个响应式对象,层级不深,
ref
、reactive
都可以。- 若需要一个响应式对象,且层级较深,推荐使用
reactive
。
let car = reactive({ brand: '奔驰', price: 100 })
function changeCar(){
car = {brand:"aotuo",price:1} //页面不会更新
car = reactive({brand:"aotuo",price:1})//页面不会更新
Object.assign(car,{brand:"aotuo",price:1}) //可以更新
}
2.5.5 toRefs 与 toRef
- 作用:将一个响应式对象中的每一个属性,转换为
ref
对象。- 备注:
toRefs
与toRef
功能一致,但toRefs
可以批量转换。
数据解构之后同样失去了响应式,从形式上看像是指针指向问题,{name,gender}中的变量赋予新地址,所以修改不影响person中的{name,gender},而toRefs之后将指针重新指向到person,从而保持响应式能力。
具体原理不清楚
<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>
2.6 【computed计算属性】
computed属性是Vue3中的一个响应式计算属性,与vue2中作用一致,它可以根据其他响应式数据的变化而自动更新其自身的值。computed属性可以接收一个计算函数,并在计算函数中使用其他响应式数据的值进行计算。当任何一个参与计算的响应式数据发生变化时,computed属性会自动重新计算其值,并触发相应的依赖更新。
使用如下:
<template>
<div class="person">
姓:<input type="text" v-model="firstName"> <br>
名:<input type="text" v-model="lastName"> <br>
全名:<span>{{fullName}}</span> <br>
<button @click="changeFullName">全名改为:li-si</button>
</div>
</template>
<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]
}
})
function changeFullName(){
fullName.value = 'li-si'
}
</script>
在Vue3中,computed属性的原理是使用了一个getter函数和一个setter函数来实现。当我们访问计算属性的值时,会调用getter函数进行计算,并将计算结果缓存起来。当参与计算的响应式数据发生变化时,会触发依赖更新,并自动调用getter函数重新计算计算属性的值。当我们修改计算属性的值时,会调用setter函数进行更新。
2.7 【watch监听与watchEffect
】
- 作用:监视数据的变化(和
Vue2
中的watch
作用一致)- 特点:
Vue3
中的watch
只能监视以下四种数据:
ref
定义的数据。reactive
定义的数据。- 函数返回一个值(
getter
函数)。- 一个包含上述内容的数组。
- watch()中有三个参数:
- 第一个参数是侦听器的源。这个来源可以上面四中数据
- 在发生变化时要调用的回调函数,这个回调函数接受2个参数:新值、旧值,并有一个返回值(代表结束监听)
- 第三个可选的参数是一个对象,支持以下这些选项:
immediate
:在侦听器创建时立即触发回调。第一次调用时旧值是undefined
。deep
:如果源是对象,强制深度遍历,以便在深层级变更时触发回调。参考深层侦听器。flush
:调整回调函数的刷新时机。参考回调的刷新时机及 watchEffect()。onTrack / onTrigger
:调试侦听器的依赖。参考调试侦听器。once
:回调函数只会运行一次。侦听器将在回调函数首次运行后自动停止。
2.7.1 情况1 监视ref
定义的【基本类型】数据
<template>
<div class="person">
<h1>情况一:监视【ref】定义的【基本类型】数据</h1>
<h2>当前求和为:{{sum}}</h2>
<button @click="changeSum">点我sum+1</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {ref,watch} from 'vue'
// 数据
let sum = ref(0)
// 方法
function changeSum(){
sum.value += 1
}
// 监视,情况一:监视【ref】定义的【基本类型】数据
const stopWatch = watch(sum,(newValue,oldValue)=>{
console.log('sum变化了',newValue,oldValue)
if(newValue >= 10){
stopWatch()
}
})
</script>
2.7.2 情况2 监视ref
定义的【对象类型】数据
直接写数据名,监视的是对象的【地址值】,若想监视对象内部的数据,要手动开启深度监视。
注意:
若修改的是
ref
定义的对象中的属性,newValue
和oldValue
都是新值,因为它们是同一个对象。若修改整个
ref
定义的对象,newValue
是新值,oldValue
是旧值,因为不是同一个对象了。
<template>
<div class="person">
<h1>情况二:监视【ref】定义的【对象类型】数据</h1>
<h2>姓名:{{ person.name }}</h2>
<h2>年龄:{{ person.age }}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="changePerson">修改整个人</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {ref,watch} from 'vue'
// 数据
let person = ref({
name:'张三',
age:18
})
// 方法
function changeName(){
person.value.name += '~'
}
function changeAge(){
person.value.age += 1
}
function changePerson(){
person.value = {name:'李四',age:90}
}
/*
监视,情况一:监视【ref】定义的【对象类型】数据,监视的是对象的地址值,若想监视对象内部属性的变化,需要手动开启深度监视
watch的第一个参数是:被监视的数据
watch的第二个参数是:监视的回调
watch的第三个参数是:配置对象(deep、immediate等等.....)
*/
watch(person,(newValue,oldValue)=>{
console.log('person变化了',newValue,oldValue)
},{deep:true})
</script>
未开启 deep效果如下:
开启deep效果如下:
2.7.3 情况3 监视reactive
定义的【对象类型】数据
默认开启了深度监视
<template>
<div class="person">
<h1>情况三:监视【reactive】定义的【对象类型】数据</h1>
<h2>姓名:{{ person.name }}</h2>
<h2>年龄:{{ person.age }}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="changePerson">修改整个人</button>
<hr>
<h2>测试:{{obj.a.b.c}}</h2>
<button @click="test">修改obj.a.b.c</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {reactive,watch} from 'vue'
// 数据
let person = reactive({
name:'张三',
age:18
})
let obj = reactive({
a:{
b:{
c:666
}
}
})
// 方法
function changeName(){
person.name += '~'
}
function changeAge(){
person.age += 1
}
function changePerson(){
Object.assign(person,{name:'李四',age:80})
}
function test(){
obj.a.b.c = 888
}
// 监视,情况三:监视【reactive】定义的【对象类型】数据,且默认是开启深度监视的
watch(person,(newValue,oldValue)=>{
console.log('person变化了',newValue,oldValue)
})
watch(obj,(newValue,oldValue)=>{
console.log('Obj变化了',newValue,oldValue)
})
</script>
2.7.4 情况4 监视ref
或reactive
定义的【对象类型】数据中的某个属性
监视
ref
或reactive
定义的【对象类型】数据中的某个属性,注意点如下:
- 若该属性值不是【对象类型】,需要写成函数形式。
- 若该属性值是依然是【对象类型】,可直接写,监听的是对象,所以只能监听内部数据,如果整个对象改变是不会被监听的,也可写成函数,建议写成函数,因为监听的是地址,只要开启deep,无论是整个对象还是内部数据都可以被监听。
结论:监视的要是对象里的属性,那么最好写函数式,注意点:若是对象监视的是地址值,需要关注对象内部,需要手动开启深度监视。
<template>
<div class="person">
<h1>情况四:监视【ref】或【reactive】定义的【对象类型】数据中的某个属性</h1>
<h2>姓名:{{ person.name }}</h2>
<h2>年龄:{{ person.age }}</h2>
<h2>汽车:{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="changeC1">修改第一台车</button>
<button @click="changeC2">修改第二台车</button>
<button @click="changeCar">修改整个车</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {reactive,watch} from 'vue'
// 数据
let person = reactive({
name:'张三',
age:18,
car:{
c1:'奔驰',
c2:'宝马'
}
})
// 方法
function changeName(){
person.name += '~'
}
function changeAge(){
person.age += 1
}
function changeC1(){
person.car.c1 = '奥迪'
}
function changeC2(){
person.car.c2 = '大众'
}
function changeCar(){
person.car = {c1:'雅迪',c2:'爱玛'}
}
// 监视,情况四:监视响应式对象中的某个属性,且该属性是基本类型的,要写成函数式
/* watch(()=> person.name,(newValue,oldValue)=>{
console.log('person.name变化了',newValue,oldValue)
}) */
// 监视,情况四:监视响应式对象中的某个属性,且该属性是对象类型的,可以直接写,也能写函数,更推荐写函数
watch(()=>person.car,(newValue,oldValue)=>{
console.log('person.car变化了',newValue,oldValue)
},{deep:true})
</script>
2.7.5 情况5 使用数组监视上述的多个数据
需要监听多个数据,使用上面的情况集合在数组中即可监听多个数据源
<template>
<div class="person">
<h1>情况五:监视上述的多个数据</h1>
<h2>姓名:{{ person.name }}</h2>
<h2>年龄:{{ person.age }}</h2>
<h2>汽车:{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="changeC1">修改第一台车</button>
<button @click="changeC2">修改第二台车</button>
<button @click="changeCar">修改整个车</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {reactive,watch} from 'vue'
// 数据
let person = reactive({
name:'张三',
age:18,
car:{
c1:'奔驰',
c2:'宝马'
}
})
// 方法
function changeName(){
person.name += '~'
}
function changeAge(){
person.age += 1
}
function changeC1(){
person.car.c1 = '奥迪'
}
function changeC2(){
person.car.c2 = '大众'
}
function changeCar(){
person.car = {c1:'雅迪',c2:'爱玛'}
}
// 监视,情况五:监视上述的多个数据
watch([()=>person.name,person.car],(newValue,oldValue)=>{
console.log('person.car变化了',newValue,oldValue)
},{deep:true})
</script>
2.7.6 watchEffect
官网:立即运行一个函数,同时响应式地追踪其依赖,并在依赖更改时重新执行该函数。
watch
对比watchEffect
- 都能监听响应式数据的变化,不同的是监听数据变化的方式不同
watch
:要明确指出监视的数据watchEffect
:不用明确指出监视的数据(函数中用到哪些属性,那就监视哪些属性)。自动监听
<template>
<div class="person">
<h1>需求:水温达到50℃,或水位达到20cm,则联系服务器</h1>
<h2 id="demo">水温:{{temp}}</h2>
<h2>水位:{{height}}</h2>
<button @click="changePrice">水温+1</button>
<button @click="changeSum">水位+10</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {ref,watch,watchEffect} from 'vue'
// 数据
let temp = ref(0)
let height = ref(0)
// 方法
function changePrice(){
temp.value += 10
}
function changeSum(){
height.value += 1
}
// 用watch实现,需要明确的指出要监视:temp、height
watch([temp,height],(value)=>{
// 从value中获取最新的temp值、height值
const [newTemp,newHeight] = value
// 室温达到50℃,或水位达到20cm,立刻联系服务器
if(newTemp >= 50 || newHeight >= 20){
console.log('联系服务器')
}
})
// 用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()
}
})
</script>
2.8【标签的 ref 属性】
作用:用于注册模板引用。
用在普通
DOM
标签上,获取的是DOM
节点。用在组件标签上,获取的是组件实例对象。
有点局部变量的感觉
现有一段代码通过id值获取dom节点
<template>
<div class="person">
<h1 id="title1">尚硅谷</h1>
<h2 id="title2">前端</h2>
<h3 id="title3">Vue</h3>
<button @click="showLog">点我输出h2元素</button>
</div>
</template>
<script lang="ts" setup name="Person">
function showLog(){
// 通过id获取元素
console.log(document.getElementById('title2'));
}
</script>
目前来看是正常的,假设在其他组件中,假设App.vue有一个同样的id,并在当前Person组件前面完成渲染,此时title2就冲突了
<template>
<div class="app1">
<h2 id="title2">App.vue中的title2</h2>
<Person/>
</div>
</template>
<script lang="ts" setup name="App">
import Person from './components/Person.vue';
</script>
<style>
.app1 {
background-color: #ddd;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
</style>
可以看到获取到了App.vue中的title2,这是因为渲染前会把所有id整合在一起,而person前的title2更早被渲染,所以被获取到,如使用ref可解决冲突问题
<template>
<div class="person">
<h1 id="title1">尚硅谷</h1>
<h2 ref="title2">前端</h2><!--将dom元素存到title2容器-->
<h3 id="title3">Vue</h3>
<button @click="showLog">点我输出h2元素</button>
</div>
</template>
<script lang="ts" setup name="Person">
import { ref } from 'vue';
//创建一个title2,用于存储ref标记的内容
let title2 = ref()
function showLog(){
// 通过id获取元素
console.log(title2.value);
}
补充:局部样式scoped,使得样式不被其他同名样式影响当前模板,无脑加
如App.vue和Person.vue都存在h2{color:}的样式,分别黑色和红色,会优先使用局部样式,且标签中会多出一个data-v-4cadc14e属性
vue3中父组件不能直接获取到子组件到ref,使用defineExpose将组件中的数据交给外部才可以
<!-- 父组件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)
}
</script>
<!-- 子组件Person.vue中要使用defineExpose暴露内容 -->
<script lang="ts" setup name="Person">
import {ref,defineExpose} from 'vue'
// 数据
let name = ref('张三')
let age = ref(18)
let sex = ref(1)
// 使用defineExpose将组件中的数据交给外部
defineExpose({name,age})
</script>
2.9【ts中的接口/泛型/自定义类型】
接口是一种规范的定义,它定义行为和规范,在程序设计中接口起到限制和规范的作用。
src创建一个文件夹types,创建一个ts文件定义接口,并通过export暴露出来
//定义一个接口用于限制person对象的具体属性
export interface PersonInterface{
id:string,
name:string,
age:number
}
在需要引用接口的文件中导入该接口,通过变量名:接口名的方式限制属性
<script lang="ts" setup name="Person">
//导入接口,主要需要在接口名前面加上type类型
import {type PersonInterface} from '@/types'
//通过接口限制属性
let person:PersonInterface = {id:'fsaf1',name:'zhangsan',age:1}
</script>
当属性不符合规范会报红
泛型
假设一个数组中保存多个person对象,使用以上方法就会保存,因为我们定义的接口是一个对象,而赋值的是一个数组,这时就需要用到泛型,限制数组中的每一个数据都符合规范
方法1:使用Array泛型解决
<script lang="ts" setup name="Person">
import {type PersonInterface} from '@/types'
let person:Array<PersonInterface> = [
{id:'fsaf1',name:'zhangsan',age:1},
{id:'fsaf2',name:'lisi',age:2},
{id:'fsaf3',name:'wangwu',age:3},
]
</script>
自定义类型
方法2:除了泛型解决,也可以自定义一个类型
//定义一个接口用于限制person对象的具体属性
export interface PersonInterface{
id:string,
name:string,
age:number
}
//自定义类型
export type Persons = Array<PersonInterface>
//也可以写成这种形式
//export type Persons = PersonInterface[]
同样使用变量名:接口名的方式来限制属性
<script lang="ts" setup name="Person">
import {type Persons} from '@/types'
let person:Persons = [
{id:'fsaf1',name:'zhangsan',age:1},
{id:'fsaf2',name:'lisi',age:2},
{id:'fsaf3',name:'wangwu',age:3},
]
</script>
可选类型,定义接口时,在属性名后加 ? 即可
//定义一个接口用于限制person对象的具体属性
export interface PersonInterface{
id:string,
name:string,
age:number,
x?:number
}
<script lang="ts" setup name="Person">
import {type Persons} from '@/types'
let person:Persons = [
{id:'fsaf1',name:'zhangsan',age:1},
{id:'fsaf2',name:'lisi',age:2},
{id:'fsaf3',name:'wangwu',age:3,x:1}
]
</script>
响应式数据泛型,调用响应式函数时直接限定泛型即可,官方推荐写法
<script lang="ts" setup name="Person">
import {type Persons} from '@/types'
import { reactive } from 'vue';
let person = reactive<Persons>([
{id:'fsaf1',name:'zhangsan',age:1},
{id:'fsaf2',name:'lisi',age:2},
{id:'fsaf3',name:'wangwu',age:3,x:1}
])
</script>
2.10【props的使用】
父组件可以通过 props 向子组件传递数据
注意:defineProps要求传入的是一个数组,如果需要在ts中使用,需要接收同时保存返回值,接收一个不存在的值是undefined
简单的例子
在App.vue传一个a='haha'到Person.vue中并使用
<!--App.vue父组件-->
<template>
<Person a="haha" b="xixi"/> <!--把a传给Person-->
</template>
<script lang="ts" setup name="App">
import Person from './components/Person.vue'
</script>
<!--Person.vue子组件-->
<template>
<h2>{{ a }}</h2> <!--接收后直接使用-->
</template>
<script lang="ts" setup name="Person">
import {defineProps} from 'vue'
//如果想在ts中使用,接收同时保存返回值
let x = defineProps(['a']) //需要使用数组接受,并且名字要与父组件使用的名字一致
console.log(x)
</script>
<style scoped>
</style>
假设需要传一个数组数据 ,并遍历渲染
v-for用法:
v-for="形参 in 数据源" :key="形参.id"
一般需要一个id作为key,以防响应数据乱序
<!--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>
<ul>
<li v-for="item in list" :key="item.id">
{{ item.name }}-{{ item.age }}
</li>
</ul>
</template>
<script lang="ts" setup name="Person">
import {defineProps} from 'vue'
defineProps(['list']) //需要使用数组接受,并且名字要与父组件使用的名字一致
</script>
<style>
</style>
这时候有个弊端,假设父组件传过来的是一数字/字符串,for循环认为是数字/字符串长度是循环次数,所以需要Person限制接收的数据类型,defineProps使用泛型即可
defineProps<{list:Persons}>()
如果需要限制可选接收,同样是变量后面加?即可
defineProps<{list?:Persons}>()
当没接受到值的时候,使用withDefaults设置默认值
withDefaults(defineProps<{list?:Persons}>(),{
list:()=>[{id:'asdasg01',name:'小猪佩奇',age:18}]//需要函数返回一个值
})
完整代码
<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>
补充:一般define开头的宏函数是不需要import导入的
2.11【生命周期】
-
概念:
Vue
组件实例在创建时要经历一系列的初始化步骤,在此过程中Vue
会在合适的时机,调用特定的函数,从而让开发者有机会在特定阶段运行自己的代码,这些特定的函数统称为:生命周期钩子 -
规律:
生命周期整体分为四个阶段,分别是:创建、挂载、更新、销毁,每个阶段都有两个钩子,一前一后。
-
Vue2
的生命周期创建阶段:
beforeCreate
、created
挂载阶段:
beforeMount
、mounted
更新阶段:
beforeUpdate
、updated
销毁阶段:
beforeDestroy
、destroyed
-
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>
2.12【自定义hooks】
hooks是什么?
vue3 中的 hooks 就是函数的一种写法,就是将文件的一些单独功能的 js 代码进行抽离出来进行封装使用。
它的主要作用是 Vue3 借鉴了 React 的一种机制,用于在函数组件中共享状态逻辑和副作用,从而实现代码的可复用性。
安装axios,命令行输入npm i axios
假设当前代码有两个功能,一个sum加减,一个请求图片渲染,但是所有东西都写在一个文件上,不好维护,复用性差,可以使用hooks将该文件拆分模块化
原vue文件
<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 as string)">
<br><br>
<button @click="getDog">再来一只狗</button>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
name:'App',
})
</script>
<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios,{AxiosError} from 'axios'
let sum = ref(0)
const increment = ()=>{
sum.value += 1
}
const decrement = ()=>{
sum.value -= 1
}
onMounted(()=>{
increment()
})
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()
})
</script>
<style>
img{
height: 150px;
}
</style>
创建一个hooks文件夹保存拆分出来的文件,文件名需use开头,根据以上代码拆分为useDog.ts和useSum.ts
//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 as string)">
<br><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>
2.13【路由】
2.13.1 路由的理解
- 在前端或者vue3项目中路由主要用于构建单页面应用程序(SPA),其中所有的页面都在同一个HTML文件中加载,通过动态地切换显示不同的内容。
- 路由器(Router):路由器是负责管理路由的组件或模块。它定义了路由的规则、路径和对应的处理函数或组件。
- 请着重注意,路由器(Router)与路由(Route)的区别。路由器是用来管理路由的,你也可以理解为路由的集合。
基础框架:选择导航栏展示各个组件
About.vue组件
<template>
<div class="about">
<h2>大家好,欢迎来到尚硅谷直播间</h2>
</div>
</template>
<script setup lang="ts" name="About">
</script>
<style scoped>
.about {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: rgb(85, 84, 84);
font-size: 18px;
}
</style>
Home.vue组件
<template>
<div class="home">
<img src="http://www.atguigu.com/images/index_new/logo.png" alt="">
</div>
</template>
<script setup lang="ts" name="Home">
</script>
<style scoped>
.home {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
</style>
News.vue组件
<template>
<div class="news">
<ul>
<li><a href="#">新闻001</a></li>
<li><a href="#">新闻002</a></li>
<li><a href="#">新闻003</a></li>
<li><a href="#">新闻004</a></li>
</ul>
</div>
</template>
<script setup lang="ts" name="News">
</script>
<style scoped>
/* 新闻 */
.news {
padding: 0 20px;
display: flex;
justify-content: space-between;
height: 100%;
}
.news ul {
margin-top: 30px;
list-style: none;
padding-left: 10px;
}
.news li>a {
font-size: 18px;
line-height: 40px;
text-decoration: none;
color: #64967E;
text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {
width: 70%;
height: 90%;
border: 1px solid;
margin-top: 20px;
border-radius: 10px;
}
</style>
App.vue组件
<template>
<div class="app">
<h2 class="title">Vue路由测试</h2>
<!-- 导航区 -->
<div class="navigate">
<a href="#" class="active" >首页</a>
<a href="#">新闻</a>
<a href="#">关于</a>
</div>
<!-- 展示区 -->
<div class="main-content">
此处展示各个组件
</div>
</div>
</template>
<script lang="ts" setup name="App">
</script>
<style>
/* App */
.title {
text-align: center;
word-spacing: 5px;
margin: 30px 0;
height: 70px;
line-height: 70px;
background-image: linear-gradient(45deg, gray, white);
border-radius: 10px;
box-shadow: 0 0 2px;
font-size: 30px;
}
.navigate {
display: flex;
justify-content: space-around;
margin: 0 100px;
}
.navigate a {
display: block;
text-align: center;
width: 90px;
height: 40px;
line-height: 40px;
border-radius: 10px;
background-color: gray;
text-decoration: none;
color: white;
font-size: 18px;
letter-spacing: 5px;
}
.navigate a.active {
background-color: #64967E;
color: #ffc268;
font-weight: 900;
text-shadow: 0 0 1px black;
font-family: 微软雅黑;
}
.main-content {
margin: 0 auto;
margin-top: 30px;
border-radius: 10px;
width: 90%;
height: 400px;
border: 1px solid;
}
</style>
2.13.2 基本切换效果
1、安装 Vue Router
npm install vue-router
2、src创建router 文件夹,并在该文件夹下创建index.ts
import {createRouter,createWebHistory} from 'vue-router'
import Home from '@/components/Home.vue'
import News from '@/components/News.vue'
import About from '@/components/About.vue'
//创建路由器
const router = createRouter({
history:createWebHistory(),
routes:[ //routes可以看作是一个路由器,一个大括号是一个路由规则
{
path:'/home', //path是访问路径
component:Home。//component是渲染的组件
},
{
path:'/about',
component:About
},
{
path:'/news',
component:News
}
]
})
export default router
3、main.ts中使用router
//引入createApp用于创建应用
import { createApp } from "vue";
//引入App根组件
import App from "./App.vue";
//引入路由器
import router from "./router/intex";
//创建一个应用
let app = createApp(App)
//使用路由器
app.use(router)
//挂载整个应用到容器中
app.mount("#app")
4、 告诉Vue组件的展示位
引入路由组件
<script lang="ts" setup name="App">
import {RouterView} from 'vue-router'
</script>
展示位置占个位
<div class="main-content">
此处展示各个组件
<RouterView></RouterView>
</div>
此时直接url访问就可以展示出来了
5、把a标签换成RouterLink,让他选择导航栏选项to切换路径,并设置活动属性active-class
<!-- 导航区 -->
<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
这时候就完成了基本切换效果
2.14【两个注意点】
路由组件通常存放在
pages
或views
文件夹,一般组件通常存放在components
文件夹。通过点击导航,视觉效果上“消失” 了的路由组件,默认是被卸载掉的,需要的时候再去挂载。
2.15【路由器工作模式】
-
history
模式优点:
URL
更加美观,不带有#
,更接近传统的网站URL
。缺点:后期项目上线,需要服务端配合处理路径问题,否则刷新会有
404
错误。const router = createRouter({ history:createWebHistory(), //history模式 /******/ })
-
hash
模式优点:兼容性更好,因为不需要服务器端处理路径。
缺点:
URL
带有#
不太美观,且在SEO
优化方面相对较差。const router = createRouter({ history:createWebHashHistory(), //hash模式 /******/ })
2.16 【to的两种写法】
<!-- 第一种:to的字符串写法 -->
<router-link active-class="active" to="/home">主页</router-link>
<!-- 第二种:to的对象写法 -->
<router-link active-class="active" :to="{path:'/home'}">Home</router-link>
2.17 【命名路由】
作用:可以简化路由跳转及传参(后面就讲)。
给路由规则命名:
routes:[
{
name:'zhuye',
path:'/home',
component:Home
},
{
name:'xinwen',
path:'/news',
component:News,
},
{
name:'guanyu',
path:'/about',
component:About
}
]
跳转路由:
<!--简化前:需要写完整的路径(to的字符串写法) -->
<router-link to="/news">跳转</router-link>
<!--简化后:直接通过名字跳转(to的对象写法配合name属性) -->
<router-link :to="{name:'xinwen'}">跳转</router-link>
2.18 【路由嵌套】
功能描述:
点击新闻组件下的标题,在右侧渲染内容,效果如下
1.编写
News
的子路由:Detail.vue,子路由展示的内容
<template>
<div class="news">
<!-- 导航区 -->
<ul>
<li v-for="news in newsList" :key="news.id">
<RouterLink to="/news/detail">{{news.title}}</RouterLink>
</li>
</ul>
<!-- 展示区 -->
<div class="news-content">
<RouterView></RouterView>
</div>
</div>
</template>
<script setup lang="ts" name="News">
import {reactive} from 'vue'
import {RouterView,RouterLink} from 'vue-router'
const newsList = reactive([
{id:'asfdtrfay01',title:'很好的抗癌食物',content:'西蓝花'},
{id:'asfdtrfay02',title:'如何一夜暴富',content:'学IT'},
{id:'asfdtrfay03',title:'震惊,万万没想到',content:'明天是周一'},
{id:'asfdtrfay04',title:'好消息!好消息!',content:'快过年了'}
])
</script>
<style scoped>
/* 新闻 */
.news {
padding: 0 20px;
display: flex;
justify-content: space-between;
height: 100%;
}
.news ul {
margin-top: 30px;
list-style: none;
padding-left: 10px;
}
.news li>a {
font-size: 18px;
line-height: 40px;
text-decoration: none;
color: #64967E;
text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {
width: 70%;
height: 90%;
border: 1px solid;
margin-top: 20px;
border-radius: 10px;
}
</style>
2.配置路由规则,使用
children
配置项:传入一个路由对象的数组
import {createRouter,createWebHistory} from 'vue-router'
import Home from '@/components/Home.vue'
import News from '@/components/News.vue'
import About from '@/components/About.vue'
import Detail from '@/components/Detail.vue'
const router = createRouter({
history:createWebHistory(),
routes:[
{
name:'zhuye',
path:'/home',
component:Home
},
{
name:'guanyu',
path:'/about',
component:About
},
{
name:'xinwen',
path:'/news',
component:News,
children:[
{
name:'xiang',
path:'detail',
component:Detail
}
]
}
]
})
export default router
3.跳转路由(记得要加完整路径):
<router-link to="/news/detail">xxxx</router-link>
<!-- 或 -->
<router-link :to="{path:'/news/detail'}">xxxx</router-link>
记得去News组件中预留一个
<router-view>
News.vue完整代码
<template>
<div class="news">
<nav class="news-list">
<ul>
<li v-for="news in newsList" :key="news.id">
<RouterLink :to="{path:'/news/detail'}">
{{news.title}}<br>
</RouterLink>
</li>
</ul>
</nav>
<div class="news-detail">
<RouterView/>
</div>
</div>
</template>
<script setup lang="ts" name="News">
import { reactive } from 'vue';
const newsList = reactive([
{id:"adfasdffs1",title:"标题1111111111111111111",content:"内容1111111111111"},
{id:"adfasdffs1",title:"标题2222222222222",content:"内容2222222222222"},
{id:"adfasdffs1",title:"标题3333333333333",content:"内容3333333333333"},
{id:"adfasdffs1",title:"标题4444444444444",content:"内容4444444444444"},
])
</script>
<style scoped>
/* 新闻 */
.news {
padding: 0 20px;
display: flex;
justify-content: space-between;
height: 100%;
}
.news ul {
margin-top: 30px;
list-style: none;
padding-left: 10px;
}
.news li>a {
font-size: 18px;
line-height: 40px;
text-decoration: none;
color: #64967E;
text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {
width: 70%;
height: 90%;
border: 1px solid;
margin-top: 20px;
border-radius: 10px;
}
</style>
2.19 【路由传参】
2.19.1 query参数
1.传递参数
<!-- 跳转并携带query参数(to的字符串写法) -->
<RouterLink :to="`/news/detail?id=${news.id}&title=${news.title}&content=${news.content}`">{{news.title}}</RouterLink>
<!-- 跳转并携带query参数(to的对象写法) -->
<RouterLink
:to="{
//name:'xiang', //用name也可以跳转
path:'/news/detail',
query:{
id:news.id,
title:news.title,
content:news.content
}
}"
>
{{news.title}}
</RouterLink>
2.接收参数
<template>
<ul class="news-list">
<li>编号:{{ route.query.id }}</li>
<li>标题:{{ route.query.title }}</li>
<li>内容:{{ route.query.content }}</li>
</ul>
</template>
<script setup lang="ts" name="About">
import { useRoute } from 'vue-router';
let route = useRoute()
console.log(route)
</script>
<style scoped>
.news-list {
list-style: none;
padding-left: 20px;
}
.news-list>li {
line-height: 30px;
}
</style>
2.19.2 params参数
1.传递参数
注意:
- 需要在路由文件中占位,path中使用/:变量名表示占位,变量名后加?代表可选参数
- 不能用path,只能用name命名路由
- 不能传对象和数组
路由配置
import {createRouter,createWebHistory} from 'vue-router'
import Home from '@/components/Home.vue'
import News from '@/components/News.vue'
import About from '@/components/About.vue'
import Detail from '@/components/Detail.vue'
const router = createRouter({
history:createWebHistory(),
routes:[
{
name:'zhuye',
path:'/home',
component:Home
},
{
name:'guanyu',
path:'/about',
component:About
},
{
name:'xinwen',
path:'/news',
component:News,
children:[
{
name:'xiang',
path:'detail/:id/:title/:content?',
component:Detail
}
]
}
]
})
export default router
参数传递
<!-- 跳转并携带params参数(to的字符串写法) -->
<!-- <RouterLink :to="`/news/detail/${news.id}/${news.title}/${news.content}`">{{news.title}} -->
<!-- 跳转并携带params参数(to的对象写法) -->
<RouterLink
:to="{
name:'xiang', //用name跳转
params:{
id:news.id,
title:news.title,
content:news.title
}
}"
>
{{news.title}}
</RouterLink>
2.接收参数
<template>
<ul class="news-list">
<li>编号:{{ route.params.id }}</li>
<li>标题:{{ route.params.title }}</li>
<li>内容:{{ route.params.content }}</li>
</ul>
</template>
<script setup lang="ts" name="About">
import { useRoute } from 'vue-router';
let route = useRoute()
console.log(route)
</script>
<style scoped>
.news-list {
list-style: none;
padding-left: 20px;
}
.news-list>li {
line-height: 30px;
}
</style>
也这样这样写
<template>
<ul class="news-list">
<li>编号:{{ params.id }}</li>
<li>标题:{{ params.title }}</li>
<li>内容:{{ params.content }}</li>
</ul>
</template>
<script setup lang="ts" name="About">
import { useRoute } from 'vue-router';
import { toRefs } from 'vue';
let route = useRoute()
let {params} = toRefs(route)
console.log(route)
</script>
2.20 【路由的props配置】
作用:让路由组件更方便的收到参数(可以将路由参数作为
props
传给组件)与组件props差不多,只是写法不同,和需要在路由文件中配置
路由配置
{
name:'xinwen',
path:'/news',
component:News,
children:[
{
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
}
}
]
}
同样是使用defineProps接收
<template>
<ul class="news-list">
<li>编号:{{ id }}</li>
<li>标题:{{ title }}</li>
<li>内容:{{ content }}</li>
</ul>
</template>
<script setup lang="ts" name="About">
defineProps(['id','title','content'])
</script>
2.21【 replace属性】
作用:控制路由跳转时操作浏览器历史记录的模式。
浏览器的历史记录有两种写入方式:分别为
push
和replace
:
push
是追加历史记录(默认值)。replace
是替换当前记录。开启
replace
模式:
<RouterLink replace .......>News</RouterLink>
2.22 【编程式导航】
编程式路由导航就是为了脱离<RouterLink>实现路由跳转,RouterLink生成的是a标签
一个简单的例子:在home页面停留3秒后调转到news页面
<script setup lang="ts" name="Home">
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
let router = useRouter()
onMounted(()=>{
setTimeout(()=>{
router.push('/news')
},3000)
})
</script>
实现点击按钮跳转
<template>
<div class="news">
<!-- 导航区 -->
<ul>
<li v-for="news in newsList" :key="news.id">
<button @click="showNewsDetail(news)">查看新闻</button>
<RouterLink
:to="{
name:'xiang',
query:{
id:news.id,
title:news.title,
content:news.content
}
}"
>
{{news.title}}
</RouterLink>
</li>
</ul>
<!-- 展示区 -->
<div class="news-content">
<RouterView></RouterView>
</div>
</div>
</template>
<script setup lang="ts" name="News">
import {reactive} from 'vue'
import {RouterView,RouterLink,useRouter} from 'vue-router'
const newsList = reactive([
{id:'asfdtrfay01',title:'很好的抗癌食物',content:'西蓝花'},
{id:'asfdtrfay02',title:'如何一夜暴富',content:'学IT'},
{id:'asfdtrfay03',title:'震惊,万万没想到',content:'明天是周一'},
{id:'asfdtrfay04',title:'好消息!好消息!',content:'快过年了'}
])
const router = useRouter()
interface NewsInter {
id:string,
title:string,
content:string
}
function showNewsDetail(news:NewsInter){
router.replace({
name:'xiang',
query:{
id:news.id,
title:news.title,
content:news.content
}
})
}
</script>
<style scoped>
/* 新闻 */
.news {
padding: 0 20px;
display: flex;
justify-content: space-between;
height: 100%;
}
.news ul {
margin-top: 30px;
/* list-style: none; */
padding-left: 10px;
}
.news li::marker {
color: #64967E;
}
.news li>a {
font-size: 18px;
line-height: 40px;
text-decoration: none;
color: #64967E;
text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {
width: 70%;
height: 90%;
border: 1px solid;
margin-top: 20px;
border-radius: 10px;
}
</style>
2.24 【重定向】
作用:将特定的路径,重新定向到已有路由。
在前面我们没有配置根路由,所以会有一个警告,我们就用根路由来做演示
通过重定向来解决这个警告
{
path:'/',
redirect:'/home'
}
2.25 【pinia集中式状态(数据)管理库】
Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态。pinia和Vuex的作用是一样的,它也充当的是一个存储数据的作用,存储在pinia的数据允许我们在各个组件中使用。
2.25.1准备一个效果
求和hooks
<template>
<div class="count">
<h2>当前求和为:{{ sum }}</h2>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="add">加</button>
<button @click="minus">减</button>
</div>
</template>
<script setup lang="ts" name="Count">
import { ref } from "vue";
// 数据
let sum = ref(1) // 当前求和
let n = ref(1) // 用户选择的数字
// 方法
function add(){
sum.value += n.value
}
function minus(){
sum.value -= n.value
}
</script>
<style scoped>
.count {
background-color: skyblue;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 10px;
}
select,button {
margin: 0 5px;
height: 25px;
}
</style>
土味情话hooks
<template>
<div class="talk">
<button @click="getLoveTalk">获取一句土味情话</button>
<ul>
<li v-for="talk in talkList" :key="talk.id">{{talk.title}}</li>
</ul>
</div>
</template>
<script setup lang="ts" name="LoveTalk">
import {reactive} from 'vue'
import axios from "axios";
import {nanoid} from 'nanoid'
// 数据
let talkList = reactive([
{id:'ftrfasdf01',title:'今天你有点怪,哪里怪?怪好看的!'},
{id:'ftrfasdf02',title:'草莓、蓝莓、蔓越莓,今天想我了没?'},
{id:'ftrfasdf03',title:'心里给你留了一块地,我的死心塌地'}
])
// 方法
async function getLoveTalk(){
// 发请求,下面这行的写法是:连续解构赋值+重命名
let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
// 把请求回来的字符串,包装成一个对象
let obj = {id:nanoid(),title}
// 放到数组中
talkList.unshift(obj)
}
</script>
<style scoped>
.talk {
background-color: orange;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 10px;
}
</style>
App.vue
<template>
<Count/>
<br>
<LoveTalk/>
</template>
<script setup lang="ts" name="App">
import Count from './components/Count.vue'
import LoveTalk from './components/LoveTalk.vue'
</script>
main.ts
// 引入createApp用于创建应用
import {createApp} from 'vue'
// 引入App根组件
import App from './App.vue'
// 创建一个应用
const app = createApp(App)
// 挂载整个应用到app容器中
app.mount('#app')
2.25.2 搭建pinia环境
第一步:
npm install pinia
第二步:操作
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')
此时开发者工具中已经有了pinia
选项
2.25.3 存储/读取数据
根据规范在src下创建一个store文件夹保存相关存储实体的代码文件,下面根据上面基础效果改造代码
创建count.ts和loveTalk.ts来存储数据
//count.ts
import {defineStore} from 'pinia'
export const useCountStore = defineStore('count',{ //第一个参数相当于id值,第二个参数配置对象
//state配置项是存储数据的地方,需要写成一个函数并return一个对象
state(){
return {
sum:6
}
}
})
//loveTalk.ts
import {defineStore} from 'pinia'
export const useTalkStore = defineStore('talk',{ //第一个参数相当于id值,第二个参数配置对象
//state配置项是存储数据的地方,需要写成一个函数并return一个对象
state(){
return {
talkList:[
{id:'ftrfasdf01',title:'今天你有点怪,哪里怪?怪好看的!'},
{id:'ftrfasdf02',title:'草莓、蓝莓、蔓越莓,今天想我了没?'},
{id:'ftrfasdf03',title:'心里给你留了一块地,我的死心塌地'}
]
}
}
})
读取数据:
import {useCountStore} from "@/store/count" //引入
const countStore = useCountStore() //调用,就可以在模板里面用了
<!--count.vue-->
<template>
<div class="count">
<h2>当前求和为:{{ countStore.sum }}</h2> <!--直接countStore获取sum数据就行-->
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="add">加</button>
<button @click="minus">减</button>
</div>
</template>
<script setup lang="ts" name="Count">
import { ref,reactive } from "vue";
import {useCountStore} from "@/store/count"
// 数据
const countStore = useCountStore() //直接调用即可保存一个store
console.log(countStore)
console.log(countStore.sum) //ref对象,但不需要.value,原因是reactive包着的ref会自动拆包,可以参考下面obj的例子
console.log(countStore.$state.sum) //两种方法都可以取出数据
let obj = reactive({
a:1,
b:2,
c:ref(3)
})
let x = ref(9)
console.log(obj.a)
console.log(obj.b)
console.log(obj.c)
console.log(x.value)
let n = ref(1) // 用户选择的数字
// 方法
function add(){
}
function minus(){
}
</script>
<style scoped>
.count {
background-color: skyblue;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 10px;
}
select,button {
margin: 0 5px;
height: 25px;
}
</style>
<!--loveTalk.vue-->
<template>
<div class="talk">
<button @click="getLoveTalk">获取一句土味情话</button>
<ul>
<li v-for="talk in talkStore.talkList" :key="talk.id">{{talk.title}}</li>
</ul>
</div>
</template>
<script setup lang="ts" name="LoveTalk">
import axios from "axios";
import {nanoid} from 'nanoid'
import {useTalkStore} from "@/store/loveTalk"
// 数据
const talkStore = useTalkStore()
// 方法
async function getLoveTalk(){
// 发请求,下面这行的写法是:连续解构赋值+重命名
let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
// 把请求回来的字符串,包装成一个对象
let obj = {id:nanoid(),title}
// 放到数组中
talkStore.talkList.unshift(obj)
}
</script>
<style scoped>
.talk {
background-color: orange;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 10px;
}
</style>
2.25.4 修改数据(三种方式)
-
第一种修改方式,直接修改
countStore.sum = 666
-
第二种修改方式:批量修改
countStore.$patch({ //批量修改 sum:999, school:'atguigu' })
-
第三种修改方式:借助
action
修改(action
中可以编写一些业务逻辑)import { defineStore } from 'pinia' export const useCountStore = defineStore('count', { //actions放一个一个处理函数 actions: { //加 increment(value:number) { if (this.sum < 10) { //操作countStore中的sum,this就是store本身 this.sum += value } }, //减 decrement(value:number){ if(this.sum > 1){ this.sum -= value } } }, /*************/ })
组件中调用
action
即可
// 使用countStore
const countStore = useCountStore()
// 调用对应action
countStore.incrementOdd(n.value)
2.25.5 stroeToRefs
- 借助
storeToRefs
将store
中的数据转为ref
对象,方便在模板中使用。- 注意:
pinia
提供的storeToRefs
只会将数据做转换,而Vue
的toRefs
会转换store
中数据。
<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>
2.25.6 getters的使用
概念:当
state
中的数据,需要经过处理后再使用时,可以使用getters
配置。追加
getters
配置。
// 引入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, //方法1:传入state
upperSchool():string{ //会报提示,给个限制string就行
return this. school.toUpperCase()//方法2:直接使用this
}
}
})
2.25.7 $subscribe订阅的使用
通过 store 的
$subscribe()
方法侦听state
及其变化, 类似于watch
//loveTalk.vue
talkStore.$subscribe((mutate,state)=>{
console.log('LoveTalk',mutate,state)
localStorage.setItem('talk',JSON.stringify(talkList.value))
})
//store
state(){
return {
talkList:Json.parse(localStorage.getItem('talkList') as string) || []
}
}
2.25.8 store组合式写法
上面都是选项式的写法,也可以写成组合式的写法
import {defineStore} from 'pinia'
import axios from 'axios'
import {nanoid} from 'nanoid'
import {reactive} from 'vue'
export const useTalkStore = defineStore('talk',()=>{
// talkList就是state
const talkList = reactive(
JSON.parse(localStorage.getItem('talkList') as string) || []
)
// getATalk函数相当于action
async function getATalk(){
// 发请求,下面这行的写法是:连续解构赋值+重命名
let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
// 把请求回来的字符串,包装成一个对象
let obj = {id:nanoid(),title}
// 放到数组中
talkList.unshift(obj)
}
return {talkList,getATalk}
})
2.26 【组件通信】
2.26.1 方式1 props
概述:
props
是使用频率最高的一种通信方式,常用与 :父 ↔ 子。
- 若 父传子:属性值是非函数。
- 若 子传父:属性值是函数。
父组件:
<template>
<div class="father">
<h3>父组件,</h3>
<h4>我的车:{{ car }}</h4>
<h4>儿子给的玩具:{{ toy }}</h4>
<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('奔驰')
const toy = ref()
// 方法
function getToy(value:string){
toy.value = value
}
</script>
子组件
<template>
<div class="child">
<h3>子组件</h3>
<h4>我的玩具:{{ toy }}</h4>
<h4>父给我的车:{{ car }}</h4>
<button @click="getToy(toy)">玩具给父亲</button>
</div>
</template>
<script setup lang="ts" name="Child">
import { ref } from "vue";
const toy = ref('奥特曼')
defineProps(['car','getToy'])
</script>
2.26.2 方式2 自定义事件custom-event
- 概述:自定义事件常用于:子 => 父。
- 注意区分好:原生事件、自定义事件。
- 原生事件:
- 事件名是特定的(
click
、mosueenter
等等)- 事件对象
$event
: 是包含事件相关信息的对象(pageX
、pageY
、target
、keyCode
)- 自定义事件:
- 事件名是任意名称
- 事件对象
$event
: 是调用emit
时所提供的数据,可以是任意类型!!!
示例:
<!--child.vue-->
<template>
<div class="child">
<h3>子组件</h3>
<h4>玩具:{{ toy }}</h4>
<button @click="emit('send-toy',toy)">测试</button>
</div>
</template>
<script setup lang="ts" name="Child">
import { ref } from "vue";
// 数据
let toy = ref(['奥特曼','vitas'])
// 声明事件
const emit = defineEmits<{(e:'send-toy',data:string[]):void;}>()
</script>
<style scoped>
.child{
margin-top: 10px;
background-color: rgb(76, 209, 76);
padding: 10px;
box-shadow: 0 0 10px black;
border-radius: 10px;
}
</style>
<{(e:'send-toy',data:string[]):void;}>()是
defineEmits
函数的泛型参数,它告诉TypeScript和Vue,这个组件可以触发一个名为'
send-toy'
的事件,并且这个事件会传递一个number[]
(数字数组)类型的参数,void可以看做固定写法。
<!--Parent.vue-->
<template>
<div class="father">
<h3>父组件</h3>
<h4 v-show="toy.length != 0">子给的玩具:{{ toy[0] }} ,{{ toy[1] }}</h4>
<!-- 给子组件Child绑定事件 -->
<Child @send-toy="saveToy"/>
</div>
</template>
<script setup lang="ts" name="Father">
import Child from './Child.vue'
import { ref, toRefs } from "vue";
// 数据
let toy= ref<string[]>([])
// 用于保存传递过来的玩具
function saveToy(value:Array<string>){
// console.log('saveToy',value)
toy.value = value
}
</script>
<style scoped>
.father{
background-color:rgb(165, 164, 164);
padding: 20px;
border-radius: 10px;
}
.father button{
margin-right: 5px;
}
</style>
2.26.3 方式3 mitt
概述:与消息订阅与发布(pubsub
)功能类似,可以实现任意组件间通信。
安装mitt
npm i mitt
依次创建文件src\utils\emitter.ts
// 引入mitt
import mitt from "mitt";
// 创建emitter
const emitter = mitt()
/*
// 绑定事件
emitter.on('abc',(value)=>{
console.log('abc事件被触发',value)
})
emitter.on('xyz',(value)=>{
console.log('xyz事件被触发',value)
})
setInterval(() => {
// 触发事件
emitter.emit('abc',666)
emitter.emit('xyz',777)
}, 1000);
setTimeout(() => {
// 清理事件
emitter.all.clear()
}, 3000);
*/
// 创建并暴露mitt
export default emitter
接收数据的组件中:绑定事件、同时在销毁前解绑事件:
<template>
<div class="child2">
<h3>子组件2</h3>
<h4>电脑:{{ computer }}</h4>
<h4>哥哥给的玩具:{{ toy }}</h4>
</div>
</template>
<script setup lang="ts" name="Child2">
import {ref,onUnmounted} from 'vue'
import emitter from '@/utils/emitter';
// 数据
let computer = ref('联想')
let toy = ref('')
// 给emitter绑定send-toy事件
emitter.on('send-toy',(value:any)=>{
toy.value = value
})
// 在组件卸载时解绑send-toy事件
onUnmounted(()=>{
emitter.off('send-toy')
})
</script>
<style scoped>
.child2{
margin-top: 50px;
background-color: orange;
padding: 10px;
box-shadow: 0 0 10px black;
border-radius: 10px;
}
</style>
【第三步】:提供数据的组件,在合适的时候触发事件
<template>
<div class="child1">
<h3>子组件1</h3>
<h4>玩具:{{ toy }}</h4>
<button @click="emitter.emit('send-toy',toy)">玩具给弟弟</button>
</div>
</template>
<script setup lang="ts" name="Child1">
import {ref} from 'vue'
import emitter from '@/utils/emitter';
// 数据
let toy = ref('奥特曼')
</script>
<style scoped>
.child1{
margin-top: 50px;
background-color: skyblue;
padding: 10px;
box-shadow: 0 0 10px black;
border-radius: 10px;
}
.child1 button{
margin-right: 10px;
}
</style>
2.26.4 方式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" >
-
组件标签上的
v-model
的本质::moldeValue
+update:modelValue
事件。<!-- 组件标签上使用v-model指令 --> <AtguiguInput v-model="userName"/> <!-- 组件标签上v-model的本质 --> <AtguiguInput :modelValue="userName" @update:model-value="userName = $event"/>
AtguiguInput
组件中:<template> <div class="box"> <!--将接收的value值赋给input元素的value属性,目的是:为了呈现数据 --> <!--给input元素绑定原生input事件,触发input事件时,进而触发update:model-value事件--> <input type="text" :value="modelValue" @input="emit('update:model-value',$event.target.value)" > </div> </template> <script setup lang="ts" name="AtguiguInput"> // 接收props defineProps(['modelValue']) // 声明事件 const emit = defineEmits(['update:model-value']) </script>
-
也可以更换
value
,例如改成abc
<!-- 也可以更换value,例如改成abc--> <AtguiguInput v-model:abc="userName"/> <!-- 上面代码的本质如下 --> <AtguiguInput :abc="userName" @update:abc="userName = $event"/>
AtguiguInput
组件中:<template> <div class="box"> <input type="text" :value="abc" @input="emit('update:abc',$event.target.value)" > </div> </template> <script setup lang="ts" name="AtguiguInput"> // 接收props defineProps(['abc']) // 声明事件 const emit = defineEmits(['update:abc']) </script>
-
如果
value
可以更换,那么就可以在组件标签上多次使用v-model
<AtguiguInput v-model:abc="userName" v-model:xyz="password"/>
2.26.5 方式5 $attrs
-
概述:
$attrs
用于实现当前组件的父组件,向当前组件的子组件通信(祖→孙)。 -
具体说明:
$attrs
是一个对象,包含所有父组件传入的标签属性。
注意:
$attrs
会自动排除props
中声明的属性(可以认为声明过的props
被子组件自己“消费”了,可以使用vue组件查看,子组件消费后会从arrts排除存在props)
父组件:
<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>
2.26.6 方式6 $refs、$parent
1.概述:
$refs
用于 :父→子。$parent
用于:子→父。
2.原理如下:
属性 说明 $refs
值为对象,包含所有被 ref
属性标识的DOM
元素或组件实例。$parent
值为对象,当前组件的父组件实例对象。
父组件
<template>
<div class="father">
<h3>父组件</h3>
<h4>房产:{{ house }}</h4>
<button @click="changeToy">修改Child1的玩具</button>
<button @click="changeComputer">修改Child2的电脑</button>
<button @click="getAllChild($refs)">让所有孩子的书变多</button>
<Child1 ref="c1"/>
<Child2 ref="c2"/>
</div>
</template>
<script setup lang="ts" name="Father">
import Child1 from './Child1.vue'
import Child2 from './Child2.vue'
import { ref,reactive } from "vue";
let c1 = ref()
let c2 = ref()
console.log(x) */
// 数据
let house = ref(4)
// 方法
function changeToy(){
c1.value.toy = '小猪佩奇'
}
function changeComputer(){
c2.value.computer = '华为'
}
function getAllChild(refs:{[key:string]:any}){
console.log(refs)
for (let key in refs){
refs[key].book += 3
}
}
// 向外部提供数据
defineExpose({house})
</script>
<style scoped>
.father {
background-color: rgb(165, 164, 164);
padding: 20px;
border-radius: 10px;
}
.father button {
margin-bottom: 10px;
margin-left: 10px;
}
</style>
子组件1
<template>
<div class="child1">
<h3>子组件1</h3>
<h4>玩具:{{ toy }}</h4>
<h4>书籍:{{ book }} 本</h4>
<button @click="minusHouse($parent)">干掉父亲的一套房产</button>
</div>
</template>
<script setup lang="ts" name="Child1">
import { ref } from "vue";
// 数据
let toy = ref('奥特曼')
let book = ref(3)
// 方法
function minusHouse(parent:any){
parent.house -= 1
}
// 把数据交给外部
defineExpose({toy,book})
</script>
<style scoped>
.child1{
margin-top: 20px;
background-color: skyblue;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px black;
}
</style>
子组件2
<template>
<div class="child2">
<h3>子组件2</h3>
<h4>电脑:{{ computer }}</h4>
<h4>书籍:{{ book }} 本</h4>
</div>
</template>
<script setup lang="ts" name="Child2">
import { ref } from "vue";
// 数据
let computer = ref('联想')
let book = ref(6)
// 把数据交给外部
defineExpose({computer,book})
</script>
<style scoped>
.child2{
margin-top: 20px;
background-color: orange;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px black;
}
</style>
2.26.7 方式7 provide、inject
1.概述:实现祖孙组件直接通信
2.具体使用:
- 在祖先组件中通过
provide
配置向后代组件提供数据- 在后代组件中通过
inject
配置来声明接收数据
3.具体编码:
【第一步】父组件中,使用
provide
提供数据
<template>
<div class="father">
<h3>父组件</h3>
<h4>资产:{{ money }}</h4>
<h4>汽车:{{ car }}</h4>
<button @click="money += 1">资产+1</button>
<button @click="car.price += 1">汽车价格+1</button>
<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')
注意传值的时候不要.value,否则传过去的知识一个简单的数据,而不是响应式数据
2.26.8 插槽slot
在Vue 3中,插槽是一种让父组件能够向子组件传递内容的机制。插槽可以分为默认插槽、具名插槽和作用域插槽。
默认插槽
子组件在模板中预留一个插槽位,父组件可以传入内容填充这个位置。
子组件
<template>
<div class="category">
<h2>{{title}}</h2>
<slot>默认内容</slot>
</div>
</template>
<script setup lang="ts" name="Category">
defineProps(['title'])
</script>
<style scoped>
.category {
background-color: skyblue;
border-radius: 10px;
box-shadow: 0 0 10px;
padding: 10px;
width: 200px;
height: 300px;
}
h2 {
background-color: orange;
text-align: center;
font-size: 20px;
font-weight: 800;
}
</style>
父组件
<template>
<div class="father">
<h3>父组件</h3>
<div class="content">
<Category title="热门游戏列表">
<ul>
<li v-for="g in games" :key="g.id">{{ g.name }}</li>
</ul>
</Category>
<Category title="今日美食城市">
<img :src="imgUrl" alt="">
</Category>
<Category title="今日影视推荐">
<video :src="videoUrl" controls></video>
</Category>
</div>
</div>
</template>
<script setup lang="ts" name="Father">
import Category from './Category.vue'
import { ref,reactive } from "vue";
let games = reactive([
{id:'asgytdfats01',name:'英雄联盟'},
{id:'asgytdfats02',name:'王者农药'},
{id:'asgytdfats03',name:'红色警戒'},
{id:'asgytdfats04',name:'斗罗大陆'}
])
let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')
let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')
</script>
<style scoped>
.father {
background-color: rgb(165, 164, 164);
padding: 20px;
border-radius: 10px;
}
.content {
display: flex;
justify-content: space-evenly;
}
img,video {
width: 100%;
}
</style>
具名插槽
子组件可以定义多个插槽位,父组件可以指定内容填充到哪个插槽位。
v-slot只能用在组件和template上,可以用#代替
子组件
<template>
<div class="category">
<slot name="s1">默认内容1</slot>
<slot name="s2">默认内容2</slot>
</div>
</template>
<script setup lang="ts" name="Category">
</script>
<style scoped>
.category {
background-color: skyblue;
border-radius: 10px;
box-shadow: 0 0 10px;
padding: 10px;
width: 200px;
height: 300px;
}
</style>
父组件
<template>
<div class="father">
<h3>父组件</h3>
<div class="content">
<Category>
<template v-slot:s2>
<ul>
<li v-for="g in games" :key="g.id">{{ g.name }}</li>
</ul>
</template>
<template v-slot:s1>
<h2>热门游戏列表</h2>
</template>
</Category>
<Category>
<template v-slot:s2>
<img :src="imgUrl" alt="">
</template>
<template v-slot:s1>
<h2>今日美食城市</h2>
</template>
</Category>
<Category>
<template #s2>
<video video :src="videoUrl" controls></video>
</template>
<template #s1>
<h2>今日影视推荐</h2>
</template>
</Category>
</div>
</div>
</template>
<script setup lang="ts" name="Father">
import Category from './Category.vue'
import { ref,reactive } from "vue";
let games = reactive([
{id:'asgytdfats01',name:'英雄联盟'},
{id:'asgytdfats02',name:'王者农药'},
{id:'asgytdfats03',name:'红色警戒'},
{id:'asgytdfats04',name:'斗罗大陆'}
])
let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')
let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')
</script>
<style scoped>
.father {
background-color: rgb(165, 164, 164);
padding: 20px;
border-radius: 10px;
}
.content {
display: flex;
justify-content: space-evenly;
}
img,video {
width: 100%;
}
h2 {
background-color: orange;
text-align: center;
font-size: 20px;
font-weight: 800;
}
</style>
作用域插槽
除了传递内容,插槽还可以提供数据给父组件使用。
子组件
<template>
<div class="game">
<h2>游戏列表</h2>
<slot :youxi="games" x="哈哈" y="你好"></slot>
</div>
</template>
<script setup lang="ts" name="Game">
import {reactive} from 'vue'
let games = reactive([
{id:'asgytdfats01',name:'英雄联盟'},
{id:'asgytdfats02',name:'王者农药'},
{id:'asgytdfats03',name:'红色警戒'},
{id:'asgytdfats04',name:'斗罗大陆'}
])
</script>
<style scoped>
.game {
width: 200px;
height: 300px;
background-color: skyblue;
border-radius: 10px;
box-shadow: 0 0 10px;
}
h2 {
background-color: orange;
text-align: center;
font-size: 20px;
font-weight: 800;
}
</style>
上面子组件中youxi、x、y传递给下面父组件中slotv-slot中的params(自定义的)
父组件
<template>
<div class="father">
<h3>父组件</h3>
<div class="content">
<Game>
<template v-slot="params">
<ul>
<li v-for="y in params.youxi" :key="y.id">
{{ y.name }}
</li>
</ul>
</template>
</Game>
<Game>
<template v-slot="params">
<ol>
<li v-for="item in params.youxi" :key="item.id">
{{ item.name }}
</li>
</ol>
</template>
</Game>
<Game>
<template #default="{youxi}"><!--解构-->
<h3 v-for="g in youxi" :key="g.id">{{ g.name }}</h3>
</template>
</Game>
</div>
</div>
</template>
<script setup lang="ts" name="Father">
import Game from './Game.vue'
</script>
<style scoped>
.father {
background-color: rgb(165, 164, 164);
padding: 20px;
border-radius: 10px;
}
.content {
display: flex;
justify-content: space-evenly;
}
img,video {
width: 100%;
}
</style>
可以理解子组件维护自己的数据,但结构是有父组件控制的, 所以这是一个作用域的问题
总结
2.27.1 【其他API】
shallowRef与shallowReactive
shallowRef
作用:创建一个响应式数据,但只对顶层属性进行响应式处理。也就是只能处理.value的数据,常用于整个对象的修改,如changePerson
<script setup lang="ts" name="App">
import { ref,reactive,shallowRef,shallowReactive } from 'vue'
let sum = shallowRef(0)
let person = shallowRef({
name:'张三',
age:18
})
function changeSum (){
sum.value += 1 //第一层,可用
}
function changeName (){
person.value.name = '李四' //第二层,不可用
}
function changeAge (){
person.value.age += 1 //第二层,不可用
}
function changePerson (){
person.value = {name:'tony',age:100} //第一层,可用
}
</script>
shallowReactive
作用:创建一个浅层响应式对象,只会使对象的最顶层属性变成响应式的,对象内部的嵌套属性则不会变成响应式的
<script setup lang="ts" name="App">
import { ref,reactive,shallowRef,shallowReactive } from 'vue'
let car = shallowReactive({
barnd:'奔驰',
options:{
color:'红色',
engine:'V8'
}
})
function changeBrand(){
car.barnd = '宝马' //第一层,可改
}
function changeColor(){
car.options.color = '紫色' //第二层,不可改
}
function changeEngine(){
car.options.engine = 'V12' 第二层,不可改
}
</script>
总结
通过使用 shallowRef() 和 shallowReactive() 来绕开深度响应。浅层式
API
创建的状态只在其顶层是响应式的,对所有深层的对象不会做任何处理,避免了对每一个内部属性做响应式所带来的性能成本,这使得属性的访问变得更快,可提升性能。
2.27.2 readonly与shallowReadonly
readonly
作用:用于创建一个对象的深只读副本。
用法:
const original = reactive({ ... }); const readOnlyCopy = readonly(original);
特点:
- 对象的所有嵌套属性都将变为只读。
- 任何尝试修改这个对象的操作都会被阻止(在开发模式下,还会在控制台中发出警告)。
应用场景:
- 创建不可变的状态快照。
- 保护全局状态或配置不被修改。
shallowReadonly
作用:与
readonly
类似,但只作用于对象的顶层属性。用法:
const original = reactive({ ... }); const shallowReadOnlyCopy = shallowReadonly(original);
特点:
只将对象的顶层属性设置为只读,对象内部的嵌套属性仍然是可变的。
适用于只需保护对象顶层属性的场景。
2.27.3 toRaw与markRaw
toRaw
作用:用于获取一个响应式对象的原始对象,
toRaw
返回的对象不再是响应式的,不会触发视图更新。官网描述:这是一个可以用于临时读取而不引起代理访问/跟踪开销,或是写入而不触发更改的特殊方法。不建议保存对原始对象的持久引用,请谨慎使用。
何时使用? —— 在需要将响应式对象传递给非
Vue
的库或外部系统时,使用toRaw
可以确保它们收到的是普通对象具体编码:
import { reactive,toRaw,markRaw,isReactive } from "vue"; /* toRaw */ // 响应式对象 let person = reactive({name:'tony',age:18}) // 原始对象 let rawPerson = toRaw(person)
markRaw
作用:标记一个对象,使其永远不会变成响应式的。
例如使用
mockjs
时,为了防止误把mockjs
变为响应式对象,可以使用markRaw
去标记mockjs
编码:
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:'重庆'} ]) // 根据原始对象citys去创建响应式对象citys2 —— 创建失败,因为citys被markRaw标记了 let citys2 = reactive(citys) console.log(isReactive(person)) console.log(isReactive(rawPerson)) console.log(isReactive(citys)) console.log(isReactive(citys2))
2.27.4 customRef的使用
作用:创建一个自定义的
ref
,并对其依赖项跟踪和更新触发进行逻辑控制。一般封装为hooks实现防抖效果(
useSumRef.ts
):
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}
}
2.28 【Vue3新组件 】
2.28.1 Teleport
teleport 是一种能够将我们的组件html结构移动到指定位置(容器)的技术。
<teleport to='body' >中to属性用的是选择器名
<teleport to='body' >
<div class="modal" v-show="isShow">
<h2>我是一个弹窗</h2>
<p>我是弹窗中的一些内容</p>
<button @click="isShow = false">关闭弹窗</button>
</div>
</teleport>
2.28.2 Suspense
- 等待异步组件时渲染一些额外内容,让应用有更好的用户体验
- 使用步骤:
- 异步引入组件
- 使用
Suspense
包裹组件,并配置好default
(异步组件) 与fallback(异步组件出现前但插槽)
使用场景:子组件的setup中使用了异步任务,网页渲染会有一个先后顺序,网速慢的时候可能父组件渲染完了,但带有异步任务组件的组件还在等待渲染,希望在网速慢的时候也呈现一些东西,可以使用suspense,官方目前声明该Api还是实验阶段
父组件代码
<template>
<div class="app">
<h3>我是App组件</h3>
<Suspense>
<template v-slot:default>
<Child/>
</template>
<template v-slot:fallback>
<h3>加载中.......</h3>
</template>
</Suspense>
</div>
</template>
<script>
import { defineAsyncComponent,Suspense } from "vue";
const Child = defineAsyncComponent(()=>import('./Child.vue'))
</script>
2.28.3 全局API转移到应用对象
参考官方文档:应用实例 API | Vue.js
2.28.4 Vue3的非兼容性改变
过渡类名
v-enter
修改为v-enter-from
、过渡类名v-leave
修改为v-leave-from
。
keyCode
作为v-on
修饰符的支持。
v-model
指令在组件上的使用已经被重新设计,替换掉了v-bind.sync。
v-if
和v-for
在同一个元素身上使用时的优先级发生了变化。移除了
$on
、$off
和$once
实例方法。移除了过滤器
filter
。移除了
$children
实例propert
。......
参考官方文档:Vue 3 迁移指南