Vue3初体验（1）

1、Vite简单操作

安装

yarn global add create-vite-app@1.18.0

创建项目

文档的命令

npm init vite-app 项目名 yarn create vite-app 项目名

等价于

全局安装后 cva 项目名 或 npx create-vite-app 项目名

2、Vue3与Vue2的区别

Vue3的Template支持多个跟标签，Vue2不支持Vue3有createApp()，而Vue2是new Vue()createApp(组件)，new Vue({template,render})

3、Vue-router 4

3.1 查看所有版本号

npm info vue-router versions

3.2 安装vue-router 4

yarn add vue-router@4.0.0-beta.3

3.3 初始化vue-router

新建history对象

在main.ts中添加

import {createWebHashHistory, createRouter} from 'vue-router' const history = createWebHashHistory()

新建router对象

const router = createRouter({ history, routes: [ {path: '/', component: Easyw}, ], });

app.use(router)

const app = createApp(App); app.use(router); app.mount('#app'); // 挂载组件

在App.vue中添加router-view

<template> <router-view/> </template>

在routers中添加其他测试路由

routers: [{ {path: '/', component: Easyw}, {path: '/test', component: Test}, }]

在App.vue中添加router-link

<router-link to="/">Easyw</router-link> <router-link to="/test">Test</router-link>

3.4 添加子路由

const history = createWebHashHistory(); const router = createRouter({ history, routes: [ {path: '/', component: Home}, { path: '/doc', component: Doc, children: [ {path: 'switch', component: SwitchDemo}, {path: 'switch', component: SwitchDemo}, ], }, ], });

3.5 路由切换时进行操作

先导入你的router文件

import router from './router' router.afterEach(() => { console.log(1); });

4、provide和inject

4.1 实现思路

在最外层的页面中，定义provide变量。然后在子组件中使用inject可以及时拿到该变量。

4.2 使用步骤

在最外层声明 App.vue

<script lang="ts"> // 导入相应内容 import {provide, ref} from 'vue export default { setup(){ // 使用ref设置默认值 const asideVisible = ref(false) // 使用provide设置名字以及它对应的值，供子组件访问其数值 provide('asideVisible', asideVisible) } } </script>

子组件.vue

<script lang="ts"> // 导入相应内容 import {inject, Ref} from 'vue'; export default { setup() { // 使用inject获取名为asideVisible的provide const asideVisible = inject<Ref<boolean>>('asideVisible'); }, }; </script>

5、props外部传参

5.1 实现思路

在外部定义一个需要传参的属性名，后面带上需要传递的参数。在子组件中使用props接受该参数。如果需要修改使用context.$emit和$event进行数据的修改。

5.2 使用步骤

外部组件

定义属性

setup(){ const value = ref(true) }

传递参数，并定义事件名

<Switch :value="value" @update:value="value = $event"/>

子组件

接受参数

props: { value: Boolean }

修改参数

setup(props, context){ const modify = () => { context.$emit('update:value', !props.value) } }

5.3 使用v-model简化

删除外部事件名，使用v-model代替

<Switch v-model:value="value"/>

注意：如果使用v-model，子组件内部的触发事件名必须为 update:外部定义的参数名