Vue3快速使用手册

Vue3的创建

npm create vite@latest

1.设置项目名。

2.选择框架。

3.选择支持的语法，默认使用TS。

......

Vue3的使用

setUp(无法直接修改数据，也就是没有响应式)

在vue3中不不再推荐使用选项式编程而是使用组合式编程。

Vue2写法

Vue3写法

如果data函数和setup中设置的变量名相互冲突的时候会优先读取setup中的数据。

但是每次都需要return对应的数据，写起来非常的麻烦，所以我们可以将setup单独写一个script。

ref(用于定义响应式的基本数据，也可以定义对象，但是无法保证嵌套响应)

在我们需要保证响应式的数据赋值上使用ref函数，并且操作其中的vlaue属性,主要就是对value进行操作。

reactive(用于定义响应式的对象)

在我们需要保证对象嵌套式的相应的时候我们就可以使用reactive。

 当要使用响应式对象赋值的时候，我们需要使用toRefs函数来将对象中键值赋值为响应式的数据。

我们每次使用ref中数据的时候都需要添加 .value，写起来非常的麻烦，所以我们可以配置插件进行修改。

computed

 编写计算属性，且计算属性是只读的，不同于普通的属性。

在Vue3中主要就是引入computed函数，通这个函数来创建属性，并且在该函数中主要就是编写 set(修改属性)和get(获取属性)函数。

watch

watch是一个监听函数，我们且有三个参数：数据源，回调函数，监听配置。

watch的数据源只能是: ref，reactive，对象，gatter函数(返回一个数据)。

例子

暂停监听

//返回值就是暂停函数，通过对应的条件调用暂停函数
let stop = watch(() => person.value.name, function() {
        //编写对应的回调函数
        if(1==1) {
          stop();
        }
    })

 特殊情况

1.数据源是ref的话，直接使用ref就可以，不需要添加.value。

2.数据源是ref定义的对象的话，其默认是不支持深度监听的，所以需要在watch配置中添加deep:true。

    watch(name, function() {
      if(name.value != "ostkaka") {
        console.log(name.value);
      }
    },{deep:true})

3.数据源是reactive定义的话，其是默认开启深度监听的。

4.监听ref或reactive定义的对象中某个属性的时，如果属性是基本类型的话使用getter函数，如果是对象类型的话，可以直接监听，但是还是推荐使用getter函数，是可以在做对象属性监听的时候都使用getter函数进行编写。

//person.value.name对应ref中对象的属性
watch(() => person.value.name, function() {
        //编写对应的回调函数
    })

5.如果需要监听多个数据源的话，直接使用数组进行收集。

当我们需要自动去监听某些数据源的时候，我们就可以使用watchEffect，而watch需要我们手动的指出需要监听的数据源。

标签中的ref属性

如果使用标签中的id作为唯一标识的话，在不同的组件之间就会有冲突的风险。使用使用ref作为容器用于间隔。

如果ref加在html标签上，则其数据就是标签数据，如果ref加在主键标签上，则其数据就是主键数据。

 ts类型规范

自定义接口

//对应的自定义类型
export interface Person {
    name: string,
    age: number,
}

//标识对应类型的数组形式
export type Persons = Array

在vue中进行使用

props

使用defineProps函数进行参数的传递。

//父组件传入对应的list集合

将接口写入泛型就可以指定对应类型的数据。

使用withDefaults，设置默认的数据。且需要是个函数返回对应的数据。

Vue的生命周期

1.创建：setUp中的代码就是创建时需要执行的代码。

2.挂载前/挂载：使用onBeforeMount和onMounted。

    //挂载前
    onBeforeMount(() => console.log("挂载前"));
    //完成挂载
    onMounted(() => console.log("完成挂载"));

 3.更新前/更新：使用onBeforeUpdated和onUpdated。

    //更新前
    onBeforeUpdate(() => console.log("更新前"));
    //更新完成
    onUpdated(() => console.log("更新"));

4.卸载前/卸载：使用onBeforeUnmount和onUnmounted

    //卸载前
    onBeforeUnmount(() => console.log("卸载前"));
    //卸载完成
    onUnmounted(() => console.log("卸载完成"));

hooks

将相同模块的代码放在同个ts文件中，进行统一的维护。

集中的ts文件

import { ref } from "vue";

export default function() {
    let num = ref(50);

    let add = function() {
        return num.value += 10;
    }
    //返回数据可以存在多个
    return {num, add};
}

在主键中使用

路由

安装路由

npm i vue-router

创建router文件/index.ts，创建路由规则。(使用history的工作模式，也可以使用哈希模式（就是路径中带#）)

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

import blog from '../page/blog.vue'
import user from '../page/user.vue'

const router = createRouter({
//使用history的工作模式，也可以使用哈希模式（就是路径中带#）
    history: createWebHistory(),
    routes:[
        {   name: 'blog'
            path:'/blog',
            component: blog
        },
        {   
            name: 'user',
            path:'/user',
            component: user
        }
    ]
})

export default router

在main.ts中使用router。

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

let app = createApp(App);
app.use(router);
app.mount('#app');

使用router-link标签进行跳转(可以使用字符串，也可以使用 对象形式，对象中可以使用name和path来指定路由)，使用router-view指定渲染vue主键的位置。

App.vue例子

测试结果

 如果在子页面中还要展示其他的小页面的话，就可以使用子路由，使用参数 children。

路由传递参数

在router-Link中的to属性可以传入query/params参数。

 博客区

在对应的组件上使用useRoute函数进行接收。

import {useRoute} from 'vue-router'
  let route = useRoute();
 // route.query / route.param

可以使用restful风格，在路由配置中编写路径格式，必须使用name进行配置。(如果某个参数非一定存在的话就在其后加`?`)

在对应的组件上使用useRoute.params进行接收。 

编程式路由导航

使用route-Link是在template中进行编写的，如果需要在script中编写的话，我们需要使用useRouter进行编写。useRouter.push函数跳转到对应的路径。（运用场景：定时跳转，划过跳转，等等，在script编程）

重定向

将一个路径直接重定向到另一个路径上。 

pinia

作用：集中管理数据。

安装

npm i pania

在main.t中引入并使用pinia。

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

let app = createApp(App);
//创建pinia
const pinia = createPinia();
//使用pinia
app.use(pinia);
app.mount('#app');

存储数据：创建文件夹 /store，并创建对应模块的文件，在state中编写对应的数据。

import {defineStore} from 'pinia'

export const useAddStore = defineStore('add', {
    state() {
        return {
            sum: 1,
            size: 1
        }
    }
})

修改数据

1.直接修改。

2.使用$patch函数。

3.通过action属性进行修改。

import {defineStore} from 'pinia'

export const useAddStore = defineStore('add', {
    actions: {
        add(sum, size) {
            this.sum = sum;
            this.size = size;
        }
    },
    state() {
        return {
            sum: 1,
            size: 1
        }
    }
})

在对应的组件中直接调用此函数即可修改。

storeToRefs的使用

如果需要使用store中的数据时为了不破坏响应式，我们就可以使用storeToRefs来保证数据的响应式。（storeToRefs('store')）

组件通信

1.使用自定义事件(子传父常使用)

在传递者进行 定义事件和触发事件

获得数据者进行 事件的绑定

2.使用mitt组件（任意主件间通信）

下载mitt

npm i mitt

创建mitt工具包

//引入mitt
import mitt from 'mitt'

const emitter = mitt()

export default emitter

在需要进行通信的组件中进行引入

在获取数据的组件中使用emitter.on进行事件的绑定

在传递数据的组件中使用emitter.emit进行事件的触发

3.使用provide和inject实现爷孙数据传递

在上级处使用provide函数来传递数据给子级。

在子级处使用inject函数来接收上级的数据。

最终实现上级向子级数据的传递。

插槽

1.默认插槽

 在对应的组件中编写插槽位置。

在调用处使用。

2.具名插槽

指定标签存放在对应的插槽上。

使用标签填充插槽。

可以使用 # 代替 v-slot: 指定插槽。

3.作用域插槽

当插槽的组件的数据需要传递到调用者时就可以使用此插槽。

调用者使用传来的数据。