vue3 _vite+pinia

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写法

vue3

 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>

16 异步组件

    ***提升性能

    vueuse ： https://vueuse.org/core/useintersectionobserver/

16.1 当用户访问到了组件再去加载该组件

16.2