随笔分类 - vue3学习笔记
摘要：全局变量 // vue2 Vue.prototype.$http = ... // vue3 main.ts const app = createApp(App) type Filter = { priceFormat: (price: number) => string // ... } decl
阅读全文
摘要：自定义hook图片转base64 type Options = { el: string } export default function useBase64(options: Options): Promise<{ baseUrl: string }> { return new Promise(
阅读全文
摘要：vue3自定义指令 type Dir = { background: string } const vMove: Directive = { created() {}, beforeMount() {}, mounted(el: HTMLElement, dir: DirectiveBinding<
阅读全文
摘要：vue2 v-model // v-model 其实是一个语法糖 通过props 和 emit组合而成的 // 父组件props传递 <Child title.sync="父组件标题"/> <a-input v-model='keywords'/> // 子组件回传 this.$emit('upda
阅读全文
摘要：vue3_tsx语法 // 1、插件安装 npm install @vitejs/plugin-vue-jsx -D // 2、vite.config.ts配置 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-v
阅读全文
摘要：vue3 Bus兄弟组件传参 type BusClass = { emit: (name: string) => void on: (name: string, callBack: Function) => void } type ParamsKey = string | number | symb
阅读全文
摘要：provide依赖注入 // provide 和 inject 通常成对一起使用，使一个祖先组件作为其后代组件的依赖注入方，无论这个组件的层级有多深都可以注入成功，只要他们处于同一条组件链上。 // 只能在setup语法糖或者setup函数中使用，其他optionsApi只能使用配置方式 impor
阅读全文
摘要：异步组件 // index.vue import { defineAsyncComponent } from 'vue' const Dialog = defineAsyncComponent(() => import('./Dialog/index.vue')) // vue3 内置组件， 用于协
阅读全文
摘要：动态组件 import A from './A.vue' import B from './B.vue' import C from './C.vue' import { markRaw, reactive } from 'vue' type Tabs = { name: string comNam
阅读全文
摘要：父向子传递 // 父组件 <Child title="我是父组件的标题" :list="[1,2,3]" /> // 子组件接收 import { ref } from "vue"; type Props = { title: string; list: number[]; data?: numbe
阅读全文
摘要：vue3生命周期 import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onRenderTracked, onRenderTriggered, onUnmounted, onUpdated, } from "vue";
阅读全文
摘要：computed import { computed, ref } from "vue"; const firstName = ref(""); const lastName = ref(""); const name = computed(() => firstName.value + lastN
阅读全文
摘要：// 只能修改响应式对象的值 const person = reactive({ name: "zhangsan", age: 18 }); // 将age属性单独提出来响应式数据 const ageCopy = toRef(person, "age"); const change = () =>
阅读全文
摘要：reactive() 返回一个对象的响应式代理。 一般ref绑定的是基本数据类型，如果绑定的是复杂型类型，ref会自动条用toReactive方法，相当于就是使用reactive() reactive绑定的是复杂型数据类型，会判断是为引用类型，如果不是会抛出警告 响应式时深层转换的，影响所有嵌套属性
阅读全文
摘要：Ref() 接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。 如果将一个对象赋值给 ref，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref，它们将被深层地解包 import {
阅读全文
摘要：vue2 传统选项式api，逻辑比较分散，可读性差，可维护性差 vue3 composition Api 组合式api，逻辑分明，可维护性高，完美支持ts，更接近面向对象 重写双向绑定 vue2 基础Object.defineProperty()实现 vue3 基于Proxy proxy与Objec
阅读全文
