随笔分类 - Vue3 相关 / Vue3.x 基础
摘要：vue3 + ts 封装树形控件 父组件调用 <TreeFilter label="name" title="部门列表(单选)" :requestApi="getUserDepartment" :defaultValue="treeFilterValue.departmentId" @change=
阅读全文
摘要：Vue3 插槽 父组件向子组件提前挖好的坑(slot)处，填入对应的内容就叫插槽。插入的内容不局限于文本，甚至可以传入多个元素和数组。 一、理解插槽 如何使用插槽 插槽使用的最多的地方就是使用ui组件库时 官网上的例子很好，用js的函数来类比。 // 父元素传入插槽内容 FancyButton('C
阅读全文
摘要：computed 计算属性 计算属性就是当依赖的属性的值发生变化的时候，才会触发他的更改，如果依赖的值，不发生变化的时候，使用的是缓存中的属性值。 Vue3中有两种写法 如果计算属性不需要修改，可以直接使用函数形式 如果计算属性有被修改的情况，则使用对象包括getter和setter方法，get为读
阅读全文
摘要：一、watch 如果定义了reactive的数据（或者用ref包裹了引用类型等同开启reactive），想去使用watch监听数据改变，则无法正确获取旧值，并且deep属性配置无效，自动强制开启了深层次监听 watch 的三个参数 watch第一个参数,监听源 watch第二个参数,回调函数cb（n
阅读全文
摘要：ref 的实现 ref实现响应式(基本类型)也是采用Object.definedProperty()来实现的 getter和setter ref实现响应式(对象类型)也是采用Proxy来实现（底层调用reactive方法） reactive 的实现 reactive是采用Proxy来实现 只能对引用
阅读全文
摘要：provide与inject 依赖注入 vue3中使用setup语法糖与vue2的provide与inject的区别还是挺大的，这里不讨论vue3的配置项写法。 vue2的可以参考学习之前的vue2的provide与inject文章。 :triangular_flag_on_post: 【Vue2】
阅读全文
摘要：Vue3 hooks vue2里的mixins相似，但是mixins会组件的配置项覆盖。vue3使用了自定义hooks替代mixnins，hooks本质上是函数，引入调用。 封装自定义的hooks 将图片转化成base64 import { onMounted } from "vue"; inter
阅读全文
摘要：自定义指令directive 不同于vue2指令 bind inserted update componentUpdated unbind 1.vue3指令中的钩子函数 created 元素初始化的时候 beforeMount 指令绑定到元素后调用 只调用一次 mounted 元素插入父级dom调用
阅读全文
摘要：Vue3 model v-model 其实是一个语法糖 通过props 和 emit组合而成的 破坏性的变动，相较于vue2的变动(具体写法改变请看下面)： prop：value -> modelValue； 事件：input -> update:modelValue； v-bind 的 .sync
阅读全文
摘要：父子组件间的传值 vue2的父子的传值和vue2的是基本一样的，只是在当我们在使用组合式api式，只是在子组件的写法不同。 defineProps 和 defineEmits 都是只能在 <script setup> 中使用的编译器宏。他们不需要导入，且会随着 <script setup> 的处理过
阅读全文
摘要：全局组件 没啥讲的，和vue2一样，常规是src下components文件夹下新建全局组件，然后去入口文件main.ts里注册全局组件。然后就能在全局使用了 import { createApp } from 'vue' import App from './App.vue' import rout
阅读全文
摘要：动态组件 <component>,一个用于渲染动态组件或元素的载体。 <component> 是vue内置特殊元素，和<slot>一样属于模板语法。但它们并非真正的组件，同时在模板编译期间会被编译掉。因此，它们通常在模板中用小写字母书写。 <component>要完成动态组件，要配合is一起完成。要
阅读全文
摘要：Vue3 组合式api 的生命周期 beforeCreate created，setup语法糖模式(组合式api)是没有这两个生命周期的，用setup去代替 onBeforeMount 获取不到DOM， onMounted可以获取DOM onBeforeUpdate获取的是更新之前的DOM，onUp
阅读全文
摘要：Mitt库 vue3取消了全局实例的$on,$off，所以可以借助轻量Mitt库实现 200bytes轻量库，进行组件通信，可以跨平台使用，支持批量监听和批量移除。 以下为vue3+ts项目中使用Mitt的方法 import { createApp } from 'vue' import App f
阅读全文
摘要：keep-alive是一个内置抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 一、keep-alive 属性 include - (string | RegExp | Array) 定义缓存白名单，名
阅读全文
