技术在不断地更新和迭代，所以我们只有不断地学习才能不被淘汰

发现一个很实用的js库 lodash，用法 npm install lodash -S 如果报错就需要安装 npm i @types/lodash

一.先来认识一下vue3的API

ref: 将一个变量声明成响应式的如：const message = ref("我,是,真,男,人"); 当然我们也可以自定义ref,需要用到customRef属性如下：

let timer: any;
//自定义ref
function myRef<T>(value: T) {return customRef((track, trigger) => {return {get() {track();return value;},set(v) {//这里可以调用接口之类的clearTimeout(timer);timer = setTimeout(() => {value = v;console.log(",,,");timer = null;}, 500);trigger();},};});
}
const man = myRef<string>("小猪猪");

reactive：一般声明数组对象为响应式，可以先定义字段的类型

type M = {name: string;age: number;
};
let from = reactive<M>({name: "朱",age: 18,
});

toRef：对对象单个值进行修改。。yyds

const man2 = reactive({ name: "小明", age: 18, lik: "小易儿" });
let lisk = toRef(man2, "name"); //对对象单个值进行修改。。yydslisk.name="亮哥哥"

toRefs: 一般用于对对象进行结构赋值

const man2 = reactive({ name: "小明", age: 18, lik: "小易儿" });
let { name, age, lik } = toRefs(man2)

toRaw: 将响应式数据改成普通数据

triggerRef ：强制触发数据更新相当于vue2的$set

  man.value.name = "小易";相当于$settriggerRef(man);

computed：计算属性用法：

//计算属性
const fritName = ref("");
const lastName = ref("");
const nameCount = computed(() => {return fritName.value + "---" + lastName.value;
});
计算价格
let $totle = ref("");
$totle = computed<number>(() => {return data.reduce((prve, next) => {return prve + next.num * next.price;}, 0);
});

watch：监听属性用法：

//可以监听多个数据，如果监听深层次的对象值  可以写成函数
const obj = reactive({foo: {bar: {name: "xiaoyi ",},},
});
watch(() => obj.foo.bar.name,(newVal, old) => {console.log(old, newVal);}
);
//可以监听多个数据，
watch([msg, msg1],(newVal, old) => {console.log(old, newVal);},{deep: true, //深度监听immediate: true, //立即执性flush: "pre", //pre 组件更新之前调用  sync同步执性  post组件更新后执行}
);

watchEffect :高级监听用法：

//高级监听 返回一个stop函数  可以停止监听
let msg2 = ref<string>("飞机");
const stop = watchEffect((watchBefore) => {console.log(msg2.value, "===");//监听之前的函数watchBefore(() => {console.log("yyds");});},{//额外属性flush: "pre", //pre 组件更新之前调用  sync同步执性  post组件更新后执行onTrigger(e) {//可以打断点进行调试console.log("======");},}
);
//停止监听
const stopWatch = () => stop();

常用生命周期：setup 可替代（beforeCreate created setup语法烫糖模式下没有这两个生命周期）onBeforeMount，onMounted，onBeforeUpdate，onUpdated，onBeforeUnmount，onUnmounted

二.父子组件传值

1.父组件传值还是一样的方式，这里重点讲解子组件里面的方法

1.子组件接收值和展示默认值

//ts传值展示默认值withDefaults  必须在ts下使用
const props = withDefaults(defineProps<{title: String;}>(),{title: () => "",}
);

2.子组件给复制传值

//子组件
const emit = defineEmits(["fatherClick"]);
const send = () => {emit("fatherClick", "良哥");
};
//父组件<waterFall ref="waterFall1" @fatherClick="fatherClick"></waterFall> //在标签绑定方法
//使用
const fatherClick = (name: string) => {console.log(name);
};

3.子组件暴露字段和方法

//暴露方法  子组件
defineExpose({name: "良哥哥",
});
//父组件  waterFall1 标签绑定的ref   组件名： waterFall
const waterFall1 = ref<InstanceType<typeof waterFall>>();
console.log(waterFall1.value?.name, "========+++");

三：全局组件注册（这里主要讲解批量注册，单个也可使用，在component组件里新建index.js

//批量注册全局组件
const components = import.meta.globEager('./*.vue')
export default {install(app) {Object.keys(components).forEach(key => {let component = components[key].defaultapp.component(component.__name, component)})},
};

main.js

import components from "./components/index.js";
app.use(components);

四：动态组件

动态组件和vue2的动态组件用法一样，只是需要解决一点性能优化问题需要用到 markRaw和shallowRef，这样可以去除警告和提高性能优化

 <div style="display: flex"><divclass="tabs"@click="tabsCLick(item)"v-for="(item, index) in data":key="index">{{ item.name }}</div><component :is="comId"></component>
import { ref, reactive, markRaw, shallowRef } from "vue";
import A from "./A.vue";
import B from "./B.vue";
import C from "./C.vue";
const comId = shallowRef(A);const data = reactive([{name: "A组件",com: markRaw(A),},{name: "B组件",com: markRaw(B),},{name: "C组件",com: markRaw(C),},
]);
const tabsCLick = (item: any) => {comId.value = item.com;console.log(item.com, "====", comId.value);
};

5.卡槽

这里主要说动态卡槽。匿名卡槽和具名卡相对比较简单小提示：卡槽v-slot可以简写成#

    <template #[names]><div>我是动态卡槽</div></template>
const names = ref(["header"]);

6.Teleport传送组件:

将A组件传送到body页面 to属性 disabled属性 true就不会传送

<!-- <Teleport to="body"><A></A></Teleport> -->

7.keep-alive缓存:

默认全部缓存，include需要缓存的组件，max：缓存的长度，只会缓存max大小之内常用的组件 exclude:不需要缓存的组件

  <!-- <keep-alive :include="['A']" :max="1" :exclude="["B"]"><A></A><B></B></keep-alive> -->

8.transition:这个动画属性这里就不过多讲解，主要还是看文档吧

案列：针对于transition-group，这里用到了开头说的lodash js插件

 <button @click="random">random</button><transition-group move-class="mmm" tag="div" class="wraps"><div class="items" :key="item.id" v-for="item in list">{{ item.number }}</div></transition-group>
<script setup lang="ts">import _ from "lodash";let list = ref(Array.apply(null, { length: 81 } as number[]).map((_, index) => {return {id: index,number: (index % 9) + 1,};})
);
console.log(list.value);
const random = () => {list.value = _.shuffle(list.value);
};
<script>
.wraps {display: flex;flex-wrap: wrap;width: calc(25px * 9 + 9px);.items {width: 25px;height: 25px;border: 1px solid #ccc;display: flex;justify-content: center;align-items: center;}
}
.mmm {transition: all 1s;
}

9.provide和inject，

// 父组件注册
const colorVal = ref<string>("red");
provide("color", colorVal);
//子组件接收，若是报引用类型为known,需要引入import type { Ref } from "vue";
const color = inject<Ref<string>>("color");
//可以直接在css样式中写：例如：  background: v-bind(color);

10.tsx

tsx项目还是很少用到这里就大概记录一些例子：

安装：npm i @vitejs/plugin-vue-jsx -D

vite.config.ts注册：

import vueJsx from "@vitejs/plugin-vue-jsx";plugins: [vue(), vueJsx()],

创建tsx文件，引入到父组件中，和子组件使用方法一样

import { defineComponent, ref} from "vue"
// ref  在template自动解包.value,tsx并不会ref.value
//tsx,不支持v-if，可以使用三元表达式代替，
//可以使用map，代替v-for
//可以使用{}代替v-bind
interface Props {name?:string
}
export default defineComponent({props:{name:String},emits:["on-click"],
setup(props:Props,{emit}){const flag=ref(false)// return ()=>{//    return    <div v-show={flag.value}>亮哥哥</div>// }const data=[{name:"小猪"}]const fn=(val:any)=>{console.log(val,"");emit('on-click',val)}
return ()=>(<><div>props:{props.name}</div><hr />{data.map(val=>{return <div onClick={()=>fn(val)} name={val.name}>{val.name}</div>})}</>)
}
})

11.自动引入vue插件

下载插件npm i -D unplugin-auto-import

vite.config.ts 引入，这样只可以在页面直接使用ref之类的插件，无需在页面在单独引入。

import AutoImport from "unplugin-auto-import/vite";plugins: [vue(),vueJsx(),AutoImport({imports: ["vue"],dts: "src/auto-import.d.ts",}),],

12.定义全局表示能量和方法

在mian.ts中

//定义全部变量和方法
app.config.globalProperties.$env = "dev";
app.config.globalProperties.$filters = {format<T>(str: T) {return `良哥——${str}`;},
};

在dom上使用

 <div>{{ $env }}</div><div>{{ $filters.format("YYDS") }}</div>

在js中使用可以通过getCurrentInstance获取全局变量和方法

const app = getCurrentInstance();
console.log(app?.proxy.$filters.format("hahahhahhha"));

13.获取父组件传的值

// useAttrs可以将父组件传的值，全部获取到 const val=useAttrs()

//hooks的库可以用useVue

14.动态class和module写法

<div class="div">我不是癞蛤蟆</div>
const style = ref<string>("red");setTimeout(() => {style.value = "blue";}, 3000);
<style scoped>
.div {color: v-bind(style);
}
</style>//module语法  这个可以的  一个的时候可以直接写成对象<div :class="[$style.div, $style.border]">我不是癞蛤蟆</div>
module还可以自定义名字 module="zs"  对应的calss要改成zs.div<style module>
.div {color: red;
}
.border {border: 1px solid red;
}
</style>

15.使用postcss-px-to-viewport适配屏幕yyds

安装
npm install postcss-px-to-viewport --save-dev配置
在项目根目录下创建 postcss.config.js 文件，并填入一下内容：
module.exports = {plugins: {// ...'postcss-px-to-viewport': {// optionsunitToConvert: "px",  //最主要的viewportWidth: 1920,  //最主要的viewportHeight:1080,unitPrecision: 3,propList: ["*"],viewportUnit: "vw",fontViewportUnit: "vw",selectorBlackList: [],minPixelValue: 1,mediaQuery: false,replace: true,exclude: /(\/|\\)(node_modules)(\/|\\)/,}}
}

vue3 vite学习笔记 YYDS相关推荐

【Vue3】学习笔记-reactive响应式
[Vue3]学习笔记-reactive响应式用ref 设置响应式对象用reactive 设置响应式对象总结用ref 设置响应式对象 JS中设置对象 import { ref } from &q ...
Vue3+TypeScript+Vite 学习笔记（持续更新中）
文章目录一.Vue3 基础环境配置 1. 检查当前 node 版本:(`需要 node 在10 及以上`) 2. 安装 vue-cli 脚手架: 3.创建项目: 4. 自定义Eslint 规则: 二 ...
Vue3+Typescript学习笔记（十）组件通信--父子组件通信(props,$emit)，非父子组件通信(provide和inject,mitt库)
一.认识组件的嵌套 1. App单独开发前面我们是将所有的逻辑放到一个App.vue中: 在之前的案例中,我们只是创建了一个组件App: 如果我们一个应用程序将所有的逻辑都放在一个组件中,那么这个组 ...
vue3.0学习笔记 (suspense组件 defineAsyncComponent异步引入)
通过defineAsyncComponent异步引入 <template><div><Suspense>// 这两个插槽名称是固定的// defalut:这里面写的 ...
VUE3.0学习笔记（一）-创建VUE项目
一.介绍-VUE CLI Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 @vue/cli 实现的交互式的项目脚手架. 通过 @vue/cli + @vue/cli-s ...
【几乎最全/全网最长的 2 万字】前端工程化完整流程：从头搭到尾（vue3 + vite + qiankun + docker + tailwindcss + iview......）
文章目录一.完整构建流程 1.在指定目录下执行 pnpm init,初始化 package.json 2.执行 pnpm install vite -D,安装 vite. 3.package.jso ...
我的VUE3逆袭笔记~
VUE3的学习笔记[从啥也不会到起码看得明白] 枯燥的开头,勇敢迈出第一步: main.js是我们项目的入口文件不要写太多东西现在用的是vite式的!!! [ 创建一个Vue应用前提已经安装高版本的 ...
Admin.NET管理系统（vue3等前后端分离）学习笔记--持续更新
我的学习笔记 - 9iAdmin.NET 欢迎学习交流 (一)前端笔记 1.1 关于.env的设置 1.2 关于路由模式问题 1.3 关于 vue.config.ts 1.4 关于打包(pnpm r ...
vue3小兔鲜商城项目学习笔记+资料分享01
最近正在学习vue3小兔鲜,需要相关学习资料的可以点链接 https://docs.qq.com/doc/DUmhUVERtUHpLaG1a 下面试学习笔记项目起步项目预览地址小兔鲜儿商城:ht ...

vue3 vite学习笔记 YYDS