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/