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 };

},

子组件

cart-test组件 计数器：{{ modelValue }}

<button @click="updateCount">+1

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')