vue3 vite等笔记

1.脚手架
vue-cli基于webpack封装，生态非常强大，可配置性也非常高，几乎能够满足前端工程化的所有要求。缺点就是配置复杂，甚至有公司有专门的webpack工程师专门做配置，另外就是webpack由于开发环境需要打包编译，开发体验实际上不如vite。

vite开发模式基于esbuild，打包使用的是rollup。急速的冷启动和无缝的hmr在开发模式下获得极大的体验提升。缺点就是该脚手架刚起步，生态上还不及webpack。

2.通过nvm切换node版本
3.vue3和vue2，reactdiff算法{

vue3采用头和头尾和尾比较，用最长递增子序列算法优化
vue2采用头和头尾和尾头和尾为何头比较
react采用从头到尾
}

4.ref全家桶

ref响应式数据对象
isRef判断

5.reactive全家桶

reactive:用来绑定复杂的数据类型

6.to系统全家桶
toref：响应式简单数据类型
torefs：复杂响应式类型
toraw：静态非响应式

7.watch
1.监听响应式简单数据类型

let sum = ref(0);
// 监视ref所定义的一个响应式数据
、
watch(sum, (newValue, oldValue) => {
console.log("sum ==> ", newValue, oldValue);
});

return {
  sum,
};

2.监听复杂数据类型

let person = reactive({
name: "lisa",
age: 18,
job: {
joblist: {
money: 10,
},
},
});

watch(person,(newValue, oldValue) => {
console.log("person ==> ", newValue, oldValue);
},{immediate:true,deep:false}
//这里的deep配置不再奏效

);

return {
person,
};

3.监听响应式数据中某个属性

watch(()=>person.name,(newValue, oldValue) => {
console.log("person.name ==> ", newValue, oldValue);
});

return {
person,
};

8.watchEffect 高级监听器

1.停止监听清楚副作用
2. onInvalidate(()=>{ })清除副作用之后的回调

9.父子传参
接受值
defineProps<{
title:string,
data:number[]
}>()

子父传参
const list = reactive<number[]>([4, 5, 6])

const emit = defineEmits(['on-click'])
const clickTap = () => {
emit('on-click', list)
}

10.全局组件，局部组件
1.全局注册
// 引入全局组件
import GlobalComponent from "./components/GlobalComponent"
// 注册全局组件
app.component("GlobalComponent",GlobalComponent);

11。异步组件和代码分包优化配合Suspense
const B = defineAsyncComponent(() => import('./childCom/B.vue'))

12，依赖注入
爷爷组件给孙子组件传递数据
需要使用到vue提供的provide以及inject方法

其中，provide用来提供传递的数据，inject用来接收数据

13.兄弟之间传值
vue2 $emit $on ,eventbus
vue3 :
import mitts from 'mitt'
const mitt = mitts()
export default mitt

14.vue3 v-model

父组件

components: { CartTest },

setup() {

const count = ref(0);

return { count };
},

子组件

14.vue3全局变量
const app = createApp({});
app.config.globalProperties.$http = () => {};

15.vue3 ,样式穿透:deep()
16.pinia

1.安装

import {createPinia,PiniaVuePlugin} from 'pinia'
Vue.use(PiniaVuePlugin)
const pinia = createPinia()//需要挂载在实例上

new Vue({
render: h => h(App),
pinia
}).$mount('#app')

2.存储

新增store.js

import { defineStore } from "pinia" // 定义容器

export const useStore = defineStore('useStore', {
/**

• 存储全局状态
• 1.必须是箭头函数: 为了在服务器端渲染的时候避免交叉请求导致数据状态污染
• 和 TS 类型推导
  */
  state: () => {
  return {
  count: 0,

}

},
/**

• 用来封装计算属性 有缓存功能 类似于computed
  */
  getters: {

},
/**

• 编辑业务逻辑 类似于methods
  */
  actions: {
  increment(){
  this.count++
  }
  }

})

3.实例化使用

import {mapState,mapActions} from 'pinia'
import { useStore } from "../store/index.js";
export default {
name: "HelloWorld",
data() {
return {
store: {},
};
},
props: {
msg: String,
},
methods: {
...mapActions(useStore,['increment']),

},
computed:{
...mapState(useStore,['count'])
}

16.移动端开发vhvw

1.npm install postcss-px-to-viewport -D

2.新建vite.config.ts
import { fileURLToPath, URL } from 'url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import postcsspxtoviewport from "postcss-px-to-viewport" //插件
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), vueJsx()],
css: {
postcss: {
plugins: [
postcsspxtoviewport({
unitToConvert: 'px', // 要转化的单位
viewportWidth: 750, // UI设计稿的宽度
unitPrecision: 6, // 转换后的精度，即小数点位数
propList: [''], // 指定转换的css属性的单位，代表全部css属性的单位都进行转换
viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名，
minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
replace: true, // 是否转换后直接更换属性值
landscape: false // 是否处理横屏情况
})
]
}
},
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})

3.引入声明文件 tsconfig.app postcss-px-to-viewport.d.ts跟vite.ts同级

{
"extends": "@vue/tsconfig/tsconfig.web.json",
"include": ["env.d.ts", "src//*", "src//.vue", "postcss-px-to-viewport.d.ts"],
"exclude": ["src/**/tests/"],
"compilerOptions": {
"composite": true,
"baseUrl": ".",
"paths": {
"@/": ["./src/"]
}
}
}

1.vue3 router使用
1.安装引用

npm install vue-router@4
2.新建路由文件 router.js

import { createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw } from 'vue-router'

import login from '@/views/login/index.vue' // 自定义的 登录页
import LoginOut from '@/views/login/loginOut.vue' // 自定义的登出页

const routes: Array = [
{
path: '/',
name: 'Login',
component: login
},
{
path: '/LoginOut',
name: 'LoginOut',
component: LoginOut
}
]

/**

• 定义返回模块
  */
  const router = createRouter({
  history: createWebHistory('/abc/'), // 设置为history模式，就是路径里面没有#, createWebHashHistory 是默认的，括号里面的就是基础路径，可以理解为项目名称，就是请求路径的基础url
  routes
  })

export default router

3.main使用

import router from './router' // 引入router
createApp(App).use(router).use(Antd).mount('#app')