尚硅谷Vue3入门到实战，最新版vue3+TypeScript前端开发教程

标签：TypeScript name Vue3 vue let 10px import 最新版 ref

1.创建Vue3工程

npm create vue@latest

或者

npm init vue@latest

输入项目名和需要的工具后进入项目

如果项目报错使用命令安装Node.js的项目依赖包

npm i

启动vue项目，查看项目是否创建完成

npm run dev

直接删掉src

然后创建src文件夹，在该文件夹中创建main.ts和App.vue文件

在src中有两个文件必不可少，分别是

main.ts

App.vue

App.vue基本内容：

<style>

</style>
<template>
    
</template>

<script lang="ts">

</script>

那么main.ts的基本内容：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

2.写一个简单的效果

使用插件

创建components文件夹，然后再创建Person.vue文件

components/Person.vue:

<style>
.person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
button{
    margin: 0 10px;
}
</style>
<template>
    <div class="person">
        <h2>姓名：{{name}}</h2>
        <h2>年龄:{{age}}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">显示联系方式</button>
    </div>
</template>

<script lang="ts">
   export default{
    name :'Person',
    data(){
        return {
            name:'张三',
            age:18,
            tel:'13888888888'
        }
    },
    methods:{
        showTel(){
            alert(this.tel)
        },
        changeName(){
            this.name = 'zhang-san'
        },
        changeAge(){
            this.age += 1
        }
    }
   }
</script>

App.vue:

<style scoped>
    .app{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
</style>
<template>
    <div class="app">
        <h1>App你好</h1>
        <PersonVue/>
    </div>
</template>

<script lang="ts">
import PersonVue from "./components/Person.vue";

export default{
    name:'App',
    components:{PersonVue}
}
</script>

这说明了Vue3可以写Vue2的代码

上面是选项式API，我们将其改为组合式API,如下：

在setup函数中的this是undefined

如果遇到组件名和文件名不一致的情况，如：

为了使用一个script标签标识setup的同时命名文件的组件名，则需要安装插件

npm i vite-plugin-vue-setup-extend -D

然后再vite.config.ts中加入

import VueSetupExtend from 'vite-plugin-vue-setup-extend'

然后在plugins中追加VueSetupExtend()

如下：

所修改后的组合式API:

<style scoped>
.person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
button{
    margin: 0 10px;
}
</style>
<template>
    <div class="person">
        <h2>姓名：{{name}}</h2>
        <h2>年龄:{{age}}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">显示联系方式</button>
    </div>
</template>

<script lang="ts" setup name="Person234">
    let name = '张三'
    let age = 18
    let tel = '13888888888'

    function changeName(){
        name = 'zhang-san'
    }

    function changeAge(){
        age += 1
    }

    function showTel(){
        alert(tel)
    }
</script>

这还不是完整的修改，因为变量name和age，无法通过调用函数的方式显示改变后变量的值，同时还没使用到ref，下面的修改会解决这些问题

3.ref创建，基本类型的响应式数据

<style scoped>
.person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
button{
    margin: 0 10px;
}
</style>
<template>
    <div class="person">
        <h2>姓名：{{name}}</h2>
        <h2>年龄:{{age}}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">显示联系方式</button>
    </div>
</template>

<script lang="ts" setup name="Person">
import { ref } from "vue"
    let name = ref('张三')
    let age = ref(18)
    let tel = '13888888888'

    function changeName(){
        name.value = 'zhang-san'
    }

    function changeAge(){
        age.value += 1
    }

    function showTel(){
        alert(tel)
    }
</script>

4.reative创建，对象类型的响应式数据

<style scoped>
.person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
button{
    margin: 0 10px;
}
</style>
<template>
    <div class="person">
       <h2>一辆{{car.brand}}车，价值{{car.price}}万</h2>
       <button @click="changePrice">修改汽车的价格</button>
    </div>
    <br>
    <h2>游戏列表：</h2>
    <ul>
        <li v-for="game in games" :key="game.id">{{game.name}}</li>
    </ul>
    <button @click="changeFirstGame">修改第一个游戏名称</button>
</template>

<script lang="ts" setup name="Person">
    import { reactive } from "vue"
    let car = reactive({brand:'奔驰',price:100})
    let games = reactive([
        {id:'game01',name:'王者'},
        {id:'game02',name:'原神'},
        {id:'game03',name:'三国'}
    ])

    function changePrice(){
        car.price += 10
    }

    function changeFirstGame(){
        games[0].name = "荣耀"
    }

</script>

5.将reactive修改为ref的方式

修改的结果如下：

<style scoped>
.person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
button{
    margin: 0 10px;
}
</style>
<template>
    <div class="person">
       <h2>一辆{{car.brand}}车，价值{{car.price}}万</h2>
       <button @click="changePrice">修改汽车的价格</button>
    </div>
    <br>
    <h2>游戏列表：</h2>
    <ul>
        <li v-for="game in games" :key="game.id">{{game.name}}</li>
    </ul>
    <button @click="changeFirstGame">修改第一个游戏名称</button>
</template>

<script lang="ts" setup name="Person">
    import {ref } from "vue"
    let car = ref({brand:'奔驰',price:100})
    let games = ref([
        {id:'game01',name:'王者'},
        {id:'game02',name:'原神'},
        {id:'game03',name:'三国'}
    ])

    function changePrice(){
        car.value.price += 10
    }

    function changeFirstGame(){
        games.value[0].name = "荣耀"
    }

</script>

6.volar工具

ref要定义的对象要加上.value改变值

可以使用volar工具，这样不用刻意去记哪个是ref，那个是reactive定义的对象

下载插件后，勾选扩展功能

7.处理数据返回

对于返回来reactive定义对象的数据，如果要更新原本的数据，可以使用Object.assign这么处理

8.toRefs和toRef

toRefs和toRef都是拿响应式数据解构出来，使其具有响应式能力，都是ref对象，所以需要.value

<style scoped>
.person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
button{
    margin: 0 10px;
}
</style>
<template>
    <div class="person">
       <h2>姓名：{{name}}</h2>
       <h2>年龄:{{age}},n1:{{ n1 }}</h2>
       <button @click="changeName">修改名字</button>
       <button @click="changeAge">修改年龄</button>
    </div>
   
</template>

<script lang="ts" setup name="Person">
    import {reactive, ref, toRef, toRefs } from "vue"
    
    let person = reactive({
        name:'张三',
        age:18
    })

    let {name,age} = toRefs(person)
    let n1 = toRef(person,'age')

    function changeName(){
        name.value += '~'
    }
    function changeAge(){
        age.value += 1
    }

</script>

9.computed计算属性

定义computed 想可读可写的方式如下所示

<style scoped>
.person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
button{
    margin: 0 10px;
}
</style>
<template>
    <div class="person">
      姓:<input type="text" v-model="firstName"/>
      <br>
      名:<input type="text" v-model="lastName"/>
      <br>
      姓名:<span>{{fullName}}</span>
      <button @click="changeFullName">修改名字</button>
    </div>
   
</template>

<script lang="ts" setup name="Person">
    import { computed, ref } from "vue"
    let firstName = ref('张')
    let lastName = ref('三')

    //这么定义的fullName是一个计算属性，只可读
/*     let fullName = computed(()=>{
        return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
    }) */

    //这么定义的fullName是一个计算属性，可读可写
    let fullName = computed({
        get(){
            return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + lastName.value
        },
        set(val){
            const [str1,str2] = val.split('-')
            firstName.value = str1
            lastName.value = str2
        }
    })

    function changeFullName(){
        fullName.value = 'li-si'
    }
</script>

10.watch监视

10.1watch监视ref定义基本类型的数据

<style scoped>
.person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
button{
    margin: 0 10px;
}
</style>
<template>
    <div class="person">
        <h2>sum:{{sum}}</h2>
        <button @click="changeSum">sum++</button>
    </div>
   
</template>

<script lang="ts" setup name="Person">
   import {ref,watch} from 'vue'

   let sum = ref(0)

   function changeSum(){
        sum.value += 1
   }

   const stopWatch = watch(sum,(newValue,oldValue)=>{
        console.log('sum变化了',newValue,oldValue)
        //定义停止监听条件
        if(newValue >= 10){
            stopWatch()
        }
   })
</script>

10.2watch监视ref定义的对象类型数据

<style scoped>
.person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
button{
    margin: 0 10px;
}
</style>
<template>
    <div class="person">
        <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:20}
    }

    watch(person,(newValue,oldValue)=>{
        console.log(newValue,oldValue)
    },{deep:true})
</script>

10.3watch监视reactive定义对象类型数据，且默认开启了深度监听

<style scoped>
.person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
button{
    margin: 0 10px;
}
</style>
<template>
    <div class="person">
        <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 {reactive,watch} from 'vue'
    let person = reactive({
        name:'张三',
        age:18
    })

    function changeName(){
        person.name = '李四'
    }

    function changeAge(){
        person.age += 1
    }

    function changePerson(){
        Object.assign(person,{name:'小刘',age:20})
    }

    watch(person,(newValue,oldValue)=>{
        console.log(newValue,oldValue)
    })
</script>

10.4watch监视ref或reactive定义对象类型数据中某个属性

如果监听响应式对象中的某个属性，若该属性是基本类型属性，要写成函数式

<style scoped>
.person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
button{
    margin: 0 10px;
}
</style>
<template>
    <div class="person">
        <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 {reactive,watch} from 'vue'
    let person = reactive({
        name:'张三',
        age:18
    })

    function changeName(){
        person.name += '~'
    }

    function changeAge(){
        person.age += 1
    }

    function changePerson(){
        Object.assign(person,{name:'小刘',age:20})
    }

    watch(()=>person.name,(newValue,oldValue)=>{
        console.log(newValue,oldValue)
    })
</script>

10.5watch监听多个属性

<style scoped>
.person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
button{
    margin: 0 10px;
}
</style>
<template>
    <div class="person">
        <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 {reactive,watch} from 'vue'
    let person = reactive({
        name:'张三',
        age:18
    })

    function changeName(){
        person.name += '~'
    }

    function changeAge(){
        person.age += 1
    }

    function changePerson(){
        Object.assign(person,{name:'小刘',age:20})
    }

    watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
        console.log(newValue,oldValue)
    })
</script>

10.6watchEffect

watchEffect不用明确指出监听的数据（函数中用到哪些属性，那就监听哪些属性）

<style scoped>
.person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
button{
    margin: 0 10px;
}
</style>
<template>
    <div class="person">
        <h2>水温:{{temp}}</h2>
        <h2>水位:{{height}}</h2>
        <button @click="changeTemp">提高水温+10</button>
        <button @click="changeHeight">提高水位+10</button>
    </div>
   
</template>

<script lang="ts" setup name="Person">
    import {reactive,ref,watch, watchEffect} from 'vue'
   
    let temp = ref(10)
    let height = ref(0)

    function changeTemp(){
        temp.value += 10
    }
    
    function changeHeight(){
        height.value += 10
    }

    //监听 -- watch
    // watch([temp,height],(value)=>{
    //     let [newTemp,newHeight] = value
    //     if(newTemp>=30 || newHeight>=50){
    //         console.log('服务器发起请求')
    //     }
    // })

    //监听 -- watchEffect
    watchEffect(()=>{
        if(temp.value >= 30 || height.value >=50){
            console.log('服务器发起请求')
        }
    })

</script>

11.标签的ref属性

创建一个title2，用于存储ref标记的内容

Person.vue:

<style scoped>
.person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
button{
    margin: 0 10px;
}
</style>
<template>
    <div class="person">
        <h2 ref="title2">北京</h2>
        <button @click="showLog">点击我输出h2元素</button>
    </div>
   
</template>

<script lang="ts" setup name="Person">
import { ref } from 'vue';

let title2 = ref()

function showLog(){
    console.log(title2.value)
}


</script>

App.vue:

<style scoped>
    .app{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
</style>
<template>
    <h2 ref="title2">你好</h2>
    <button @click="showLog">点击我输出h2</button>
    <PersonVue/>
</template>

<script lang="ts" setup name="App">
import PersonVue from "./components/Person.vue";
import { ref }from 'vue'
let title2 = ref()

function showLog(){
    console.log(title2.value)
}

</script>

如果父组件想获取子组件中的元素，则可以使用defineExpose

Person.vue:

<style scoped>
.person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
button{
    margin: 0 10px;
}
</style>
<template>
    <div class="person">
        <h2 ref="title2">北京</h2>
        <button @click="showLog">点击我输出h2元素</button>
    </div>
   
</template>

<script lang="ts" setup name="Person">
import { ref,defineExpose } from 'vue';

let title2 = ref()
let a = ref(0)
let b = ref(1)

function showLog(){
    console.log(title2.value)
}

defineExpose({a,b})

</script>

App.vue:

<style scoped>
    .app{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
</style>
<template>
    <h2 ref="title2">你好</h2>
    <button @click="showLog">点击我输出</button>
    <PersonVue ref="ren" />
</template>

<script lang="ts" setup name="App">
import PersonVue from "./components/Person.vue";
import { ref }from 'vue'
let title2 = ref()
let ren = ref()

function showLog(){
    console.log(ren.value)
    
}



</script>

12.TS中的接口、泛型、自定义类型

如果引入的是数据类型，而不是值的话，则需要使用type来标识

创建types/index.ts

//定义一个接口，用于限制person对象的具体属性
export interface PersonInter {
    id:string,
    name:string,
    age:number
}

//一个自定义类型
// export type Persons = Array<PersonInter>
export type Persons = PersonInter[]

Person.vue:

<style scoped>
.person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
button{
    margin: 0 10px;
}
</style>
<template>
  <div class="person">

  </div>
   
</template>

<script lang="ts" setup name="Person">
import  {type PersonInter,type Persons } from '@/types'


// let person:PersonInter = {id:'dasads01',name:'zhangsan',age:20}

let person:Persons = [
    {id:'dasads01',name:'zhangsan',age:20},
    {id:'dasads02',name:'lisi',age:22},
    {id:'dasads03',name:'wangwu',age:30}
]
</script>

13.props的使用

如果子组件想获取父组件中的元素，则可以使用defineProps

Person.vue:

<style scoped>
.person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
button{
    margin: 0 10px;
}
</style>
<template>
  <div class="person">
    <ul>
        <li v-for="personObj in list" :key="personObj.id">
            {{ personObj.name }} -- {{ personObj.age }}
        </li>
    </ul>
  </div>
   
</template>

<script lang="ts" setup name="Person">
import  { Persons } from '@/types'

//只接收list
// defineProps(['list'])

//接收list + 限制类型
// defineProps<{list:Persons}>()


//接收list + 限制类型 + 限制必要性 + 指定默认值
//在list后打上?，表示可以不传入数据
withDefaults(defineProps<{list?:Persons}>(),{
    list:()=>[{id:'asdasas01',name:'康之福',age:23}]
})

</script>

App.vue:

<style scoped>
    .app{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
</style>
<template>

    <PersonVue a="哈哈" :list="personList"/>
</template>

<script lang="ts" setup name="App">
import PersonVue from "./components/Person.vue";
import {reactive} from 'vue';
import { type Persons } from "./types";

let personList = reactive<Persons>([
    {id:'dasads01',name:'zhangsan',age:20},
    {id:'dasads02',name:'lisi',age:22},
    {id:'dasads03',name:'wangwu',age:30}
])


</script>

14.生命周期

14.1 Vue2的生命周期

分为四个阶段：创建、挂载、更新、销毁

创建前：beforeCreate()

创建完毕：created()

挂载前：beforeMount()

挂载完毕：mounted()

更新前：beforeUpdate()

更新完毕：updated()

销毁前：beforeDestroy()

销毁完毕：destroyed()

14.2 Vue3的生命周期

创建阶段：setup

挂载阶段：onBeforeMount、onMounted

更新阶段：onBeforeUpdate、onUpdated

卸载阶段：onBeforeUnmount、onUnmounted

常用的钩子：onMounted（挂载完毕）、onUpdated（更新完毕）、onBeforeUnmount（卸载之前）

15.自定义Hooks

安装axios

npm i axios

以两个函数为示例，这是没有使用hooks的方式

Person.vue:

<style scoped>
.person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
button{
    margin: 0 10px;
}

img{
    height: 100px;
    margin: 10px;
}
</style>
<template>
  <div class="person">
    <h2>当前求和:{{ sum }}</h2>
    <button @click="add">点我+1</button>
    <br>
    <button @click="getDog">换一只狗</button>
    <img v-for="(dog,index) in dogList" :src="dog" :key="index">
  </div>
   
</template>

<script lang="ts" setup name="Person">

import { reactive, ref, } from 'vue';
import axios from 'axios';


let sum = ref(0)

let dogList = reactive([
    'https://images.dog.ceo/breeds/pembroke/n02113023_4373.jpg'
])

async function getDog(){
    let result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
    dogList.push(result.data.message)
}

function add(){
    sum.value += 1
}

</script>

使用hooks后的方式，先创建hooks文件夹，然后创建useDog.ts和useSum.ts文件，分别存放，Sum和Dog相关的代码块，使用方式：
useSum.ts:

import {computed, onMounted, ref } from 'vue';


export default function(){
    let sum = ref(0)

    let bigsum = computed(()=>{
        return sum.value * 10
    })


    function add(){
        sum.value += 1
    }

    onMounted(()=>{
        sum.value += 1
    })

    return {sum,add,bigsum}
}

useDog.ts:

import { reactive} from 'vue';
import axios from 'axios';


export default function(){
    let dogList = reactive([
        'https://images.dog.ceo/breeds/pembroke/n02113023_4373.jpg'
    ])
    
    async function getDog(){
        let result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
        dogList.push(result.data.message)
    }

    return {dogList,getDog}
}

Person.vue:

<style scoped>
.person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
button{
    margin: 0 10px;
}

img{
    height: 100px;
    margin: 10px;
}
</style>
<template>
  <div class="person">
    <h2>当前求和:{{ sum }},放大十倍后:{{bigsum}}</h2>
    <button @click="add">点我+1</button>
    <br>
    <button @click="getDog">换一只狗</button>
    <img v-for="(dog,index) in dogList" :src="dog" :key="index">
  </div>
   
</template>

<script lang="ts" setup name="Person">
import useSum from '@/hooks/useSum'
import useDog from '@/hooks/useDog'
const {sum,add,bigsum} = useSum()
const {dogList,getDog} = useDog()

</script>

16.路由

16.1路由的基本切换效果

安装路由器

npm i vue-router

在components中创建Home.vue、News.vue、About.vue文件

创建文件夹router,然后在router中创建index.ts文件

path应该以斜杠 / 开头，以确保它是一个完整的路径

router/index.ts:

//引入createRouter
import { createRouter, createWebHistory } from "vue-router";

//引入组件
import Home from "@/components/Home.vue";
import About from "@/components/About.vue";
import News from "@/components/News.vue";

//创建路由器
const router = createRouter({
    history:createWebHistory(), //路由器编译规则
    routes:[{
        path:'/home',
        component:Home
    },{
        path:'/about',
        component:About
    },{
        path:'/news',
        component:News
    }]
})

export default router

main.ts:

import { createApp } from "vue";

import App from './App.vue'
import router from "./router";

//创建一个应用
const app = createApp(App)
//使用路由器
app.use(router)
//挂载整个应用到app容器中
app.mount('#app')

App.vue:

<style scoped>
    .app{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }

    
</style>
<template>
    <div class="navigate">
        <h1>navigate</h1>
       <RouterLink to="/home">首页</RouterLink>
       <RouterLink to="/news">新闻</RouterLink>
       <RouterLink to="/about">关于</RouterLink>
    </div>
    <br>
    内容：
    <div>
        <RouterView></RouterView>
    </div>

</template>

<script lang="ts" setup name="App">

import {RouterView,RouterLink} from 'vue-router'

</script>

16.2路由两个注意点

注意：

（1）一般组件存放在components文件夹中，路由组件存放在pages或views文件夹中

（2）通过点击导航，视觉效果上“消失”了的路由组件，默认是被销毁的，需要的时候再去挂载

16.3 to的两种写法

16.4路由命名

16.5嵌套路由

注意：children下的path的开头是不需要加上斜杠 / 的

在pages中创建文件Detail.vue

pages/Detail.vue:

<template>
    <div class="detail">
      <h2>Detail</h2>
    </div>
</template>
  
<script lang="ts" setup name="Detail">

</script>
<style scoped>

</style>

pages/News.vue:

<template>
    <div class="news">
        <h2>News</h2>
        <RouterView></RouterView>  
    </div>    
</template>

<script lang="ts" setup name="News">

</script>
<style scoped> 

</style>

router/index.ts:

//引入createRouter
import { createRouter, createWebHistory } from "vue-router";

//引入组件
import Home from "@/pages/Home.vue";
import About from "@/pages/About.vue";
import News from "@/pages/News.vue";
import Detail from "@/pages/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:[{
            path:'detail',
            component:Detail
        }]
    }]
})

export default router

main.ts:

import { createApp } from "vue";

import App from './App.vue'
import router from "./router";

//创建一个应用
const app = createApp(App)
//使用路由器
app.use(router)
//挂载整个应用到app容器中
app.mount('#app')

16.6路由query参数（传参）

App.vue:

<template>  
    <div class="app">  
        <h1>navigate</h1>  
        <ul>
            <li v-for="news in newsList" :key="news.id">
                <!-- 第一种方法 -->
                <!-- <RouterLink :to="`/news/detail?id=${news.id}&title=${news.title}&content=${news.content}`" >{{news.title}}</RouterLink>   -->
                
                <!-- 第二种写法 -->
                <RouterLink :to="{
                    path:'/news/detail',
                    query:{
                        id:news.id,
                        title:news.title,
                        content:news.content
                    }
                }">{{news.title}}</RouterLink>
                
            </li>
        </ul>
        <RouterLink to="/home">首页</RouterLink>  
       
        <RouterLink to="/about">关于</RouterLink>  
        <br>  
        内容：  
        <div>  
            <RouterView></RouterView>  
        </div>  
    </div>  
</template>  
  
<script lang="ts" setup name="App">  
import { reactive } from 'vue';
import { RouterView, RouterLink } from 'vue-router';  

const newsList = reactive([  
  { id: 'asdad01', title: '标题1', content: '内容1' },  
  { id: 'asdad02', title: '标题2', content: '内容2' },  
  { id: 'asdad03', title: '标题3', content: '内容3' }  
]);

</script>  
  
<style scoped>  
.app {  
    background-color: skyblue;  
    box-shadow: 0 0 10px;  
    border-radius: 10px;  
    padding: 20px;  
}  
</style>

pages/Detail.vue:

<template>
    <div class="detail">
      <h2>Detail</h2>
      <ul>
        <li>编号：{{route.query.id}}</li>
        <li>标题：{{route.query.title}}</li>
        <li>内容：{{route.query.content}}</li>
      </ul>
    </div>
</template>
  
<script lang="ts" setup name="Detail">
import { useRoute } from 'vue-router';
let route = useRoute()
</script>
<style scoped>

</style>

可以将pages/Detail.vue这么改：

<template>
    <div class="detail">
      <h2>Detail</h2>
      <ul>
        <li>编号：{{query.id}}</li>
        <li>标题：{{query.title}}</li>
        <li>内容：{{query.content}}</li>
      </ul>
    </div>
</template>
  
<script lang="ts" setup name="Detail">
import { toRefs } from 'vue';
import { useRoute } from 'vue-router';
let route = useRoute()
let {query} = toRefs(route)
</script>
<style scoped>

</style>

16.7路由params参数（传参）

注意：

（1）传递params参数时，使用to的对象写法，必须使用name配置项，不能用path

（2）传递params参数时，需要提前在规则中占位

App.vue:

<template>  
    <div class="app">  
        <h1>navigate</h1>  
        <ul>
            <li v-for="news in newsList" :key="news.id">
                <!-- 第一种方法 -->
                <!-- <RouterLink :to="`/news/detail/${news.id}/${news.title}/${news.content}`" >{{news.title}}</RouterLink>   -->
                
                <!-- 第二种写法 -->
                <RouterLink :to="{
                    name:'xiang',
                    params:{
                        id:news.id,
                        title:news.title,
                        content:news.content
                    }
                }">{{news.title}}</RouterLink>

            </li>
        </ul>
        <RouterLink to="/home">首页</RouterLink>  
       
        <RouterLink to="/about">关于</RouterLink>  
        <br>  
        内容：  
        <div>  
            <RouterView></RouterView>  
        </div>  
    </div>  
</template>  
  
<script lang="ts" setup name="App">  
import { reactive } from 'vue';
import { RouterView, RouterLink } from 'vue-router';  

const newsList = reactive([  
  { id: 'asdad01', title: '标题1', content: '内容1' },  
  { id: 'asdad02', title: '标题2', content: '内容2' },  
  { id: 'asdad03', title: '标题3', content: '内容3' }  
]);

</script>  
  
<style scoped>  
.app {  
    background-color: skyblue;  
    box-shadow: 0 0 10px;  
    border-radius: 10px;  
    padding: 20px;  
}  
</style>

router/index.ts:

注意：params传参需要对路径名前加上:，表示所传递的参数，不然会当作子路径

//引入createRouter
import { createRouter, createWebHistory } from "vue-router";

//引入组件
import Home from "@/pages/Home.vue";
import About from "@/pages/About.vue";
import News from "@/pages/News.vue";
import Detail from "@/pages/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

pages/Detail.vue:

<template>
    <div class="detail">
      <h2>Detail</h2>
      <ul>
        <li>编号：{{route.params.id}}</li>
        <li>标题：{{route.params.title}}</li>
        <li>内容：{{route.params.content}}</li>
      </ul>
    </div>
</template>
  
<script lang="ts" setup name="Detail">
import { toRefs } from 'vue';
import { useRoute } from 'vue-router';
let route = useRoute()

</script>
<style scoped>

</style>

16.8路由props配置

router/index.ts:

一般使用第一种方法和第二种方法，第二种方法使用params方法传递参数所以return route.params，如果是使用query方法传递参数，则return route.query

//引入createRouter
import { createRouter, createWebHistory } from "vue-router";

//引入组件
import Home from "@/pages/Home.vue";
import About from "@/pages/About.vue";
import News from "@/pages/News.vue";
import Detail from "@/pages/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,
            // 第一种写法：将路由收到的所有params参数作为props传给路由组件
            // props:true

            //第二种写法：函数写法，可以自己决定将什么作为props给路由组件
            props(route){
                return route.params
            }

            //第三种写法：对象写法，可以自己决定将什么作为props给路由组件
            /* props:{
                id:10,
                title:'今天去哪里？',
                content:'当然是北京'
            } */
        }]
    }]
})

export default router

pages/Detail.vue:

<template>
    <div class="detail">
      <h2>Detail</h2>
      <ul>
        <li>编号：{{id}}</li>
        <li>标题：{{title}}</li>
        <li>内容：{{content}}</li>
      </ul>
    </div>
</template>
  
<script lang="ts" setup name="Detail">
defineProps(['id','title','content'])

</script>
<style scoped>

</style>

16.9路由replace属性

给RouterLink加上replace后就无法返回上一页的内容

16.9路由导航，路由跳转

有点类似<RouterLink/>

不带参数跳转：

pages/Home.vue:

<template>
    <div class="home">
        <h2>Home</h2>
    </div>  
</template>

<script lang="ts" setup name="Home">
import { onMounted } from "vue";
import {useRouter} from 'vue-router'

const router = useRouter()

onMounted(()=>{
    setTimeout(()=>{
        //跳转路由
        router.push('/news')
    },3000)
})

</script>

<style scoped>

</style>

带参数跳转:

App.vue:

<template>  
    <div class="app">  
        <h1>navigate</h1>  
        <ul>
            <li v-for="news in newsList" :key="news.id">
                <button @click="showNewsDetail(news)">查看新闻</button>
                <!-- 第一种方法 -->
                <!-- <RouterLink :to="`/news/detail/${news.id}/${news.title}/${news.content}`" >{{news.title}}</RouterLink>   -->
                
                <!-- 第二种写法 -->
                <RouterLink :to="{
                    name:'xiang',
                    params:{
                        id:news.id,
                        title:news.title,
                        content:news.content
                    }
                }">{{news.title}}</RouterLink>

               
            </li>
        </ul>
        <RouterLink to="/home">首页</RouterLink>  
       
        <RouterLink to="/about">关于</RouterLink>  
        <br>  
        内容：  
        <div>  
            <RouterView></RouterView>  
        </div>  
    </div>  
</template>  
  
<script lang="ts" setup name="App">  
import { reactive } from 'vue';
import { RouterView, RouterLink, useRouter } from 'vue-router';  

const newsList = reactive([  
  { id: 'asdad01', title: '标题1', content: '内容1' },  
  { id: 'asdad02', title: '标题2', content: '内容2' },  
  { id: 'asdad03', title: '标题3', content: '内容3' }  
]);

const router = useRouter()

//用于限制类型
interface NewsInter{
    id:string,
    title:string,
    content:string
}

function showNewsDetail(news:NewsInter){
    router.push({
        name:'xiang',
        params:{
            id:news.id,
            title:news.title,
            content:news.content
        }}
    )
}


</script>  
  
<style scoped>  
.app {  
    background-color: skyblue;  
    box-shadow: 0 0 10px;  
    border-radius: 10px;  
    padding: 20px;  
}  
</style>

如果将router.push改为router.replace，就表示跳转到指定的路由后就无法返回了，将上面的函数的代码改为replace如下所示：

function showNewsDetail(news:NewsInter){
    router.replace({
        name:'xiang',
        params:{
            id:news.id,
            title:news.title,
            content:news.content
        }}
    )
}

16.10路由重定向

重定向（Redirect）是指通过各种方法将各种网络请求重新定向到其它位置的过程

17.Pinia

考虑多个组件共享数据

安装axios

npm i axios

安装nanoid（效果类似uuid）

npm i nanoid

17.1Pinia配置

安装pinia

npm i pinia

配置

mian.ts:

import { createApp } from "vue";

import App from './App.vue'
import { createPinia } from "pinia";

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.mount('#app')

下面是一个效果，

17.2未使用Pinia前的方式

components/Count.vue:

<template>
    <div class="count">
      <h1>当前求和:{{sum}}</h1>
      <select v-model.number="step">
        <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 lang="ts" setup name="Count">
import { ref } from 'vue';


let sum = ref(0)
let step = ref(1)

function add(){
    sum.value += step.value
}

function minus(){
    sum.value -= step.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>

components/LoveTalk.vue:

<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 lang="ts" setup name="LoveTalk">
import axios from 'axios';
import { reactive } from 'vue';
import {nanoid} from 'nanoid'

let talkList = reactive([
    {id:'sadaohd01',title:'早上好！'},
    {id:'sadaohd02',title:'中午好！'},
    {id:'sadaohd03',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: skyblue;
    padding: 10px;
    border-radius:10px;
    box-shadow:0 0 10px;
}
</style>

App.vue:

<template>
  <div>
    <h1>App组件</h1>
    <Count/>
    <br>
    <LoveTalk/>
  </div>
</template>

<script lang="ts" setup name="App">
import Count from './components/Count.vue';
import LoveTalk from './components/LoveTalk.vue';
</script>

<style scoped> 

</style>

17.3使用Pinia后的方式

创建文件夹store，然后在该文件夹中创建count.ts

store/count.ts:

import {defineStore} from 'pinia'

export const useCountStore = defineStore('count',{
    actions:{
        increment(value: number){
            console.log('increment被调用了',value)
            if(this.sum<10){
                this.sum += value
            }
        }    
    },
    //真正存储数据的地方
    state(){
        return{
            sum:6,
            school:'guigu',
            address:'beijing'
        }
    }
})

components/Count.vue:

<template>
    <div class="count">
      <h1>当前求和:{{countStore.sum}}</h1>
      <h1>学校:{{countStore.school}};地址：{{countStore.address}}</h1>
      <select v-model.number="step">
        <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 lang="ts" setup name="Count">
import { ref } from 'vue';
import { useCountStore } from '@/store/count';

const countStore = useCountStore()

//获取state数据的两种方式：
// console.log(countStore.sum)
// console.log(countStore.$state.sum)


let step = ref(1)

function add(){
  //第一种方式修改
 /*  countStore.sum += 1
  countStore.school = '硅谷'
  countStore.address = '北京' */

  //第二种方式批量修改
/*   countStore.$patch({
    sum:888,
    school:'硅谷',
    address:'北京'
  }) */

  //第三种方式,调用store里的函数
  countStore.increment(step.value)

}

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>

但是上面还没实现方法和调用storeToRefs()，实现后的完整版如下：

components/Count.vue:

<template>
    <div class="count">
      <h1>当前求和:{{sum}}</h1>
      <h1>学校:{{school}};地址：{{address}}</h1>
      <select v-model.number="step">
        <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 lang="ts" setup name="Count">
import { ref } from 'vue';
import { useCountStore } from '@/store/count';
import { storeToRefs } from 'pinia';

const countStore = useCountStore()
//storeToRefs只会关注store中数据，不会对方法进行ref包裹
const {sum,school,address} = storeToRefs(countStore)


//获取state数据的两种方式：
// console.log(countStore.sum)
// console.log(countStore.$state.sum)


let step = ref(1)

function add(){
  //第一种方式修改
 /*  countStore.sum += 1
  countStore.school = '硅谷'
  countStore.address = '北京' */

  //第二种方式批量修改
/*   countStore.$patch({
    sum:888,
    school:'硅谷',
    address:'北京'
  }) */

  //第三种方式,调用store里的函数
  countStore.increment(step.value)

}

function minus(){
  countStore.sum -= step.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>

store/count.ts:

import {defineStore} from 'pinia'

export const useCountStore = defineStore('count',{
    actions:{
        increment(value: number){
            console.log('increment被调用了',value)
            if(this.sum<10){
                this.sum += value
            }
        }    
    },
    //真正存储数据的地方
    state(){
        return{
            sum:6,
            school:'guigu',
            address:'beijing'
        }
    }
})

components/LoveTalk:

<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 lang="ts" setup name="LoveTalk">

import { useTalkStore } from '@/store/loveTalk';
import { storeToRefs } from 'pinia';
const talkStore = useTalkStore()
const {talkList} = storeToRefs(talkStore)

async function getLoveTalk(){
    talkStore.getATalk()
}

</script>

<style scoped>
.talk{
    background-color: skyblue;
    padding: 10px;
    border-radius:10px;
    box-shadow:0 0 10px;
}
</style>

store/loveTalk.ts:

import {defineStore} from 'pinia'
import axios from 'axios';
import { reactive } from 'vue';
import {nanoid} from 'nanoid'

export const useTalkStore = defineStore('talk',{
    actions:{
        async getATalk(){
            let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
            let obj = {id:nanoid(),title}
            this.talkList.unshift(obj)
        }
    },
    //真正存储数据的地方
    state(){
        return{
            talkList:[
                {id:'sadaohd01',title:'早上好！'},
                {id:'sadaohd02',title:'中午好！'},
                {id:'sadaohd03',title:'晚上好！'}
            ]
        }
    }
})

17.4 getters

getters是 Vuex store 中的计算属性。它们类似于 Vue 组件中的计算属性，但是用于从 store 中的状态派生值

store/count.ts:

import {defineStore} from 'pinia'

export const useCountStore = defineStore('count',{
    actions:{
        increment(value: number){
            console.log('increment被调用了',value)
            if(this.sum<10){
                this.sum += value
            }
        }    
    },
    //真正存储数据的地方
    state(){
        return{
            sum:6,
            school:'guigu',
            address:'beijing'
        }
    },
    getters:{
        bigSum:state => state.sum * 10,
        upperSchool():string{
            return this.school.toUpperCase()
        }
    }
})

components/Count.vue:

<template>
    <div class="count">
      <h1>当前求和:{{sum}},放大:{{bigSum}}</h1>
      <h1>学校:{{school}};地址：{{address}},大写:{{upperSchool}}</h1>
      <select v-model.number="step">
        <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 lang="ts" setup name="Count">
import { ref } from 'vue';
import { useCountStore } from '@/store/count';
import { storeToRefs } from 'pinia';

const countStore = useCountStore()
//storeToRefs只会关注store中数据，不会对方法进行ref包裹
const {sum,school,address,bigSum,upperSchool} = storeToRefs(countStore)


//获取state数据的两种方式：
// console.log(countStore.sum)
// console.log(countStore.$state.sum)


let step = ref(1)

function add(){
  //第一种方式修改
 /*  countStore.sum += 1
  countStore.school = '硅谷'
  countStore.address = '北京' */

  //第二种方式批量修改
/*   countStore.$patch({
    sum:888,
    school:'硅谷',
    address:'北京'
  }) */

  //第三种方式,调用store里的函数
  countStore.increment(step.value)

}

function minus(){
  countStore.sum -= step.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>

17.5 $subscribe的使用

订阅，监视vuex文件里的修改

components/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 lang="ts" setup name="LoveTalk">

import { useTalkStore } from '@/store/loveTalk';
import { storeToRefs } from 'pinia';
const talkStore = useTalkStore()
const {talkList} = storeToRefs(talkStore)

//$subscribe订阅
talkStore.$subscribe((mutate,state)=>{
    console.log('talkStore里面保存的数据发生了变化',mutate,state)
    localStorage.setItem('talkList',JSON.stringify(state.talkList))
})



async function getLoveTalk(){
    talkStore.getATalk()
}

</script>

<style scoped>
.talk{
    background-color: skyblue;
    padding: 10px;
    border-radius:10px;
    box-shadow:0 0 10px;
}
</style>

store/loveTalk.ts:

import {defineStore} from 'pinia'
import axios from 'axios';
import { reactive } from 'vue';
import {nanoid} from 'nanoid'

export const useTalkStore = defineStore('talk',{
    actions:{
        async getATalk(){
            let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
            let obj = {id:nanoid(),title}
            this.talkList.unshift(obj)
        }
    },
    //真正存储数据的地方
    state(){
        return{

            talkList:JSON.parse(localStorage.getItem('talkList') as string) || []
        }
    }
})

17.6store里的组合式写法

store/loveTalk.ts:

import {defineStore} from 'pinia'
import axios from 'axios';
import { reactive } from 'vue';
import {nanoid} from 'nanoid'

/* export const useTalkStore = defineStore('talk',{
    actions:{
        async getATalk(){
            let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
            let obj = {id:nanoid(),title}
            this.talkList.unshift(obj)
        }
    },
    //真正存储数据的地方
    state(){
        return{
            talkList:JSON.parse(localStorage.getItem('talkList') as string) || []
        }
    }
}) */


//组合式
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}
})

18.组件通信

18.1props

可以进行父传子和子传父；

父传子，属性值是非函数

子传父，属性值是函数

18.2自定义事件

18.3mitt

安装mitt

npm i mitt

然后创建utils文件夹，里存放emitter.ts文件

18.4 v-model

18.5 $attrs

实现祖传孙和孙传祖

18.6 $refs和$parent

$refs：父访问子的属性、方法、计算属性

$parent：子访问父的属性、方法、计算属性

18.7 provide 和 inject

在之前祖传孙需要使用$attrs，且打扰到了子组件

那么使用provide直接就可以传后代，通过inject获取

标签：TypeScript,name,Vue3,vue,let,10px,import,最新版,ref
From： https://blog.csdn.net/qq_69183322/article/details/136518026

尚硅谷Vue3入门到实战，最新版vue3+TypeScript前端开发教程

1.创建Vue3工程

然后创建src文件夹，在该文件夹中创建main.ts和App.vue文件

2.写一个简单的效果

使用插件

3.ref创建，基本类型的响应式数据

4.reative创建，对象类型的响应式数据

5.将reactive修改为ref的方式

6.volar工具

7.处理数据返回

8.toRefs和toRef

9.computed计算属性

10.watch监视

10.1watch监视ref定义基本类型的数据

10.2watch监视ref定义的对象类型数据

10.3watch监视reactive定义对象类型数据，且默认开启了深度监听

10.4watch监视ref或reactive定义对象类型数据中某个属性

10.5watch监听多个属性

10.6watchEffect

11.标签的ref属性

12.TS中的接口、泛型、自定义类型

13.props的使用

14.生命周期

14.1 Vue2的生命周期

14.2 Vue3的生命周期

15.自定义Hooks

16.路由

16.1路由的基本切换效果

16.2路由两个注意点

16.3 to的两种写法

16.4路由命名

16.5嵌套路由

16.6路由query参数（传参）

16.7路由params参数（传参）

16.8路由props配置

16.9路由导航，路由跳转

16.10路由重定向

17.Pinia

17.1Pinia配置

17.2未使用Pinia前的方式

17.3使用Pinia后的方式

components/Count.vue:

store/count.ts:

components/LoveTalk:

store/loveTalk.ts:

17.4 getters

store/count.ts:

components/Count.vue:

17.5 $subscribe的使用

components/LoveTalk.vue:

store/loveTalk.ts:

17.6store里的组合式写法

18.组件通信

18.1props

18.2自定义事件

18.3mitt

18.4 v-model

18.5 $attrs

18.6 $refs和$parent

18.7 provide 和 inject

相关文章

赞助商

阅读排行