vue3 _vite+pinia

喵喵酱仔__

已于 2023-04-19 18:14:09 修改

阅读量374

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js webpack javascript

于 2023-04-19 18:13:57 首次发布

本文链接：https://blog.csdn.net/qq_38210427/article/details/130244829

小鹿专栏收录该内容

9 篇文章

订阅专栏

1 vite

1什么是vite? 是一个构建工具

2 为什么使用vite?

基于构建工具webpack

基于webpack的项目有一个问题，就是编译慢

解决：使用vite

vite优势：在开发过程中大大提升我们的效率

webpack 修改一个，全部都要更新

vite 修改一个页面，只更新这个页面，其他页面不会更新

改一个，全部都更新，和改一个，就当前这个更新肯定后者快

2基于vite搭建项目

2.1 常规构建项目

vue create 项目名称---基于webpack

2.2 vite搭建

npm dev进行启动

注意：

vite创建的项目少 store, views, router 文件夹

2 安装router

1 安装router

2 创建文件夹

3 填写内容

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
];

const router = new VueRouter({
  mode: "history",
  base: '/',
  routes,
});

export default router;

4 挂载

启动:启动展示的home组件

3 解决@问题

不能直接使用，需要进行配置

vite 不需要最外边包一个div啦

3vue3

setup是组合式api , vu2是选项式api（data,methods拆开） ==>只是写法不同

4 setup定义数据和插件安装

4. setup

   是什么：组合式 API

   来解决什么问题 : 使用 (data、computed、methods、watch) 组件选项来组织逻辑通常都很有效。然而，当我们的组件开始变得更大时，逻辑关注点的列表也会增长。尤其对于那些一开始没有编写这些组件的人来说，这会导致组件难以阅读和理解。

   响应区别：

           vue2.x : Object.defineProperty()

           vue3.x : Proxy

           1. Object.defineProperty()存在的问题

               1. 不能监听数组的变化
               2. 必须遍历对象的每一个属性

           2. Proxy 不需要遍历

   使用渲染函数:

       ref : 就是定义数据的         简单类型

       reactive : 就是定义数据的     复杂类型

4.1 定义数据

1 数据的响应可以使用ref

写Boolean，对象都可以，什么类型都可以

2 reactive

响应，新增都可以

4.2 setup写法

4.3 vue2和vue3数据拦截不同的点

性能提升

4.4 setup语法糖插件

解决场景：在组件中开发无需每次都引入 import { ref }..

1. 下载安装

  npm i unplugin-auto-import -D

2. 配置：vite.config.js中

			import AutoImport from 'unplugin-auto-import/vite'
			export default defineConfig({
			  plugins: [
			  	AutoImport({
			  		imports:['vue','vue-router']//自动导入vue和vue-router相关函数
			  	})
			  ],
			})

之后不需要每个页面都引入了

5 toRefs 和computed

   4.6 toRefs

       toRefs 函数来完成数据的解构

   4.7 computed

       1》 let obj = reactive({
           name:'张三',
           age:18,
           str:computed(()=>{
           return obj.name.slice(1,2)
           })
           })

       2》   let msgChange = computed(()=>{
           return msg.value.slice(1,3);
           })

       3》   let msgChange = computed({
           get(){
           return msg.value.slice(1,3);
           },
           set(){
           console.log('设置了')
           }
           })

5.1 toRef

解构==》响应式数据

使用toRefs 进行解构

5.2 computed

vue2当中，如果修改得用get，set写法

6watch

1 监听某一个

2 同时监听多个

3 初始化监听

4 监听对象

7 生命周期

   5.1 选项式 API

       beforeCreate ...

   5.2 setup 组合式API

       注意：没有beforeCreate和created
       其他生命周期要使用前面加"on" 例如：onMounted

   参考链接：https://v3.cn.vuejs.org/guide/composition-api-lifecycle-hooks.html

在onBeforeMount获取不到dom元素

8 路由

8.1 版本

在vue2中，router应该使用3.多

在vue3中，router应该使用 4.X

参考文档记得看4.X

8.2 跳转

1 vue3中 tag属性去除了

2 写法问题

3 导航守卫

9 组件- 父传子

或者：

vue2:

10 组件：子传父

或者：

或者

vue2:

11 v-model 父子组件双向数据

父传数据给子组件，子组件可以修改数据

12兄弟组件之间的传值

13 插槽

13.1 匿名插槽

13.2 具名插槽

13.3 作用域插槽

13.4 动态插槽

14 teleport 传送

15 动态组件

	<component :is="动态去切换组件"></component>

vue2 中可能写3个组件，组件都引进来，点击某一个进行切换（v-show 或者v-if ）

vue3 使用动态组件

<template>

	<ul>
		<li
			v-for='(item,index) in tabList'
			:key='index'
			@click='change(index)'
		>
			{{ item.name }}
		</li>
	</ul>

	<keep-alive>
		<component :is="currentComponent.com"></component>
	</keep-alive>

</template>

<script setup>
import A from '../components/A.vue'
import B from '../components/B.vue'
import C from '../components/C.vue'

let tabList = reactive([
	{name:'A准备好面试题',com:markRaw(A)},
	{name:'B准备简历',com:markRaw(B)},
	{name:'C准备好项目',com:markRaw(C)}
]);

let currentComponent = reactive({
	com:tabList[0].com
});

const change = ( idx )=>{
	currentComponent.com = tabList[idx].com;
}

</script>