随笔分类 - vue
异步组件与Suspense
摘要：基本用法 在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。Vue 提供了 defineAsyncComponent 方法来实现此功能： import { defineAsyncComponent } from 'vue' const AsyncComp = def
依赖注入
摘要：解决的问题 祖孙组件传值 Provide (提供) 要为组件后代提供数据，需要使用到 provide() 函数： <script setup> import { provide } from 'vue' provide(/* 注入名 */ 'message', /* 值 */ 'hello!') <
props路由传参方式
摘要：前言： 有时候，当我们传递页面的数据过多的时候,目标页面内会出现大量的 this.$route.query 或者 this.$route.params 进行参数解构，还可能出现 多项 计算属性解构，这样页面会显得代码很冗杂,同时，我们必须进入到组件内部才能知道需要什么样的参数，加大阅读成本，所以希望
vue组件级别的权限控制
摘要：**核心思想：尽量减少对组件的侵入性，也就是权限控制的代码剔除出来** ### 实现 **authority.vue** ``` // 将用户权限通过作用域插槽传递出去 ``` **index.vue** ``` sssss 45 45 45 ```
Vue异步组件与Suspense
摘要：### 异步组件 #### 什么是异步组件 在Vue中，当我们注册全局或局部组件时，它们都是同步地被“立即解析并加载”的。这意味着在我们的程序初始化时，所有组件都会通过网络被下载到内存中，并且在内存中占用一定的资源。预加载所有组件会将页面的初始加载时间和性能降低，尤其是在移动设备上。为了避免这种情况
Vue插件
摘要：### 介绍 插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。下面是如何安装一个插件的示例： ``` js import { createApp } from 'vue' const app = createApp({}) app.use(myPlugin, { /* 可选的
vue通用组件自动注册
摘要：### 前置知识 #### vite中的Glob 导入 Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块 `const modules = import.meta.glob('./dir/*.js')` 以上将会被转译为下面的样子： ``` // vite 生成
vue透传 Attributes
摘要：Attributes 继承 在此之前，先来弥补一个小知识点，vue3支持多个根节点，vue2不支持， <!--vue2: 错误的写法--> <template> <div></div> <div></div> </template> <!--vue3: 正确--> <template> <div>
vue3 defineExpose()
摘要：使用 script setup 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在 script setup 中声明的绑定。 可以通过 defineExpose 编译器宏来显式指定在 script setup组件中要暴露出去的属性： ``` ``` 当
vue模板大小写区分
摘要：HTML 标签和属性名称是不分大小写的，所以浏览器会把任何大写的字符解释为小写。这意味着当你使用 DOM 内的模板时，无论是 PascalCase 形式的组件名称、camelCase 形式的 prop 名称还是 v-on 的事件名称，都需要转换为相应等价的 kebab-case (短横线连字符) 形
vue3自定义hook
摘要：### 什么是hooks - hook是钩子的意思，看到“钩子”是不是就想到了钩子函数？事实上，hooks 还真是函数的一种写法。 - vue3 借鉴 react hooks 开发出了 Composition API ，所以也就意味着 Composition API 也能进行自定义封装 hooks。
vue3组件动态缓存与动态刷新
摘要：## 动态缓存 ### 前言 在项目中，为了减少性能消耗，有时我们需要使用keep-alive把组件缓存起来，但是并不是所有组件都需要被缓存，那么如何控制那些组件需要缓存呢？主要使用到路由meta，路由前置守卫，vux，动态组件。 ### 实现 **APP.vue** ``` home test `
vue2中的v-for
摘要：数组更新检测 变更方法 Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括： push() pop() shift() unshift() splice() sort() reverse() 注意事项 由于 JavaScript 的限制，Vue 不能检测数
vue中created mounted 与 异步任务
摘要：两个生命周期 created：data属性，methods属性，watch监听等都初始化好了，也就是可以使用了。 mounted：已经把内存中编译好的模板替换到页面中，也就是视图层已渲染成最新的，vue 实例完全创建完毕。可以操作DOM。理论上内部的子组件也执行完了mounted。 异步任务与它两的
vue 侦听器以及副作用函数使用
摘要：侦听器格式 函数格式 缺点 无法在刚进入页面的时候自动触发。 如果监听了一个对象，那就无法监听对象内部属性变化 watch: { username(newVal) { if (newVal '') return //1.调用 jQuery 中的 Ajax 发起请求，判断 newVal 是否被占用 $
vue中的渲染函数
摘要：介绍 Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。 案例 有父子组件，根据父组件传过来的值，子组件显示不同的h。 子组件 test.js export default {
vue路由懒加载
摘要：当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。 Vue Router 支持开箱即用的动态导入，这意味着你可以用动态导入代替静态导入： // 将 // import Use
vue2中的mixin
摘要：1.mixin的用处： 主要用于多个组件内存在重复JS业务逻辑（可以包括methods，mounted，watch等等），将该JS部分代码封装在一个js文件下对外暴露，需要使用的组件进行引用。 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任
Vue.use使用介绍
摘要：1.介绍： 官方文档的解释: 安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。该方法需要在调用 new Vue() 之前被调用。 2.使用场景： 添加全局方法或
