qq_41261490的博客

基于antd封装的table表格筛选组件

我们在平时做业务的时候，父子组件通信会经常用到ref（我比较喜欢用这个方式，传值方便，省去一堆的watch或者computed）当我们在列表调用子组件的时候，就会用到动态ref。比如：我点击计划任务，每一行的计划任务点开都使用的同一个组件popover，如果如果我们模板使用同一个ref，即：这样调用，可以打开popover，但是很多时候，点击的和打开的不是同一个。这个时候，就需要我们将每一个ref都唯一，这个时候，我们就会用到动态ref.......

好多时候，我们使用是svg都是动态的，就会有不同的src，这时，src就需要是一个动态的变量。我们按常规配置：模板使用上面这样使用，在本地都是找不到文件的。但是直接在模板中这样使用是可以的这是因为，把变量解析成了字符串，没有按路径去查找。模板使用上述这样使用，在本地是没有问题的，但是部署到线上就找不到了，查看源代码，线上把src最终解析成了[Object Object],可见打包后，没有去解析出真正的路径。费了老半天劲，各种方式去试过，最后在vite文档中找到了答案；URL方式，不能使用模板

场景项目中，我们需要实现一列多行，多个图表，使用flex布局宽度自适应。给图表绑定了resize事件，当窗口从小到大变化时，每个图表resize正常，但是从大变小时，图表resize异常。多方排查之后，才发现是echarts没有兼容flex布局的方式。布局方面项目里我们的布局是固定一列，剩余均分自适应。该组件多个地方使用，内容项不固定，可能4项，也可能3项，所以布局我们使用了flex。.container { display: flex;}.flex-item1 { width:

实现一个内容超出显示省略号，并鼠标浮入显示tooltip，不超出的不显示tooltip组件ps：该组件是基于element-plus，使用vue3最新的setup语法糖实现的。不清楚的大家可以根据我的思路用其他技术栈实现。背景项目中有很多地方有超出显示省略号，然后鼠标浮入显示tooltip的需求。在这之前，我发现项目中有些是鼠标浮入都显示tooltip，无关乎是否超出；还有一些甚至超出显示省略号，而没有加tooltip，也就是这种情况用户连完整信息都不清楚。我感觉这应该不是产品想要的效果，可能是之

数据的响应式原理基本步骤Proxy拦截值跟踪更改它的函数：我们在 Proxy 中的 getter 中执行此操作，称为 effect触发函数以便它可以更新最终值：我们在 Proxy 中的 setter 中进行该操作，名为 trigger深入原理把一个普通的 JavaScript 对象作为 data 选项传给应用或组件实例vue会使用带有getter和setter的处理程序遍历其所有property并将其转换为Proxy(ie : Object.defineProperty。但是Proxy 版.

背景项目需求原型图如下可以添加/删除条件和条件组添加的条件组和父组件有相同的功能由此可以判断，这是一个递归组件的调用规划数据结构递归类型的数据结构，那么子和父的数据结构是一样的，那我们不难想到父里边带children数组，所以我们大概是这样的数据结构： let parent: { id: 1, ... children: [ { id: 1, ... children: [

ref与reactive的异同ref与reactive 定义基本元素类型数据时，ref定义的是包装后的响应式数据，而reactive 定义的还是原来的类型const num1 = 2;const num2 = ref(2);const num3 = reactive(2);console.log(num1) // 2console.log(num2) // RefImpl {_rawValue: 2, _shallow: false, __v_isRef: true, _value: 2}c

不建议同一节点使用v-if和v-for。若同时使用v-if的优先级较高，所以v-if是访问不了v-for中的变量的。解决：可以移入模板// 不可取<li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }}</li>// 替代方法<template v-for="todo in todos"> <li v-if="!todo.isComplete"> {..

Global API全局Vue Api已更改为使用应用程序实例vue2创建全局组件（new Vue()）缺点全局配置使得在测试期间很容易意外地污染其他测试用例全局配置使得在同一页面上的多个“app”之间共享同一个 Vue 副本非常困难，但全局配置不同vue3引入：createApp 返回一个应用实例import { createApp } from 'vue'const app = createApp({})vue2.x全局api在vue3.x中变化对比2.x 全局

在今天有一个需求是，下拉框可搜索远程数据，最开始做的时候用的本地数据延迟模拟，没有考虑数据量过大的问题。当远程请求时，数据量过大显示很慢，而且很冗长，到不了底的感觉。遇到的问题：1.触发输入框就发起请求（反复发请求，不可取）2.将远程数据直接渲染到模板（数据太多会卡顿，还不好看）解决办法：1.在组件创建时就发起请求，将所有数据暂存本地（解决1）2.每次显示只截取一部分显示，此时就下方可点击增加显示数据，每次增加50条。 <template> <e

最近学习vue，想着写一写demo练习练习。此demo是省市区的三级联动，像这样的场景我们经常看到。我也是刚开始写没有头绪，然后多方查资料。写此demo时踩过的坑：1、数据：我们希望后台给我们的数据是怎样的，方便我们操作。省市区三级联动，数据是超级相关联的，我们不能单独存数据。所以数据用数组对象，一级一级的拿到数据。2、在用v-model双向绑定select数据时，出现一个问题。我...

学习了vue，最近想着写一写demo练一练，今天写的二级菜单，中间踩过很多坑1、存数据：最开始想着一级菜单存一个数组，二级菜单存不同的数组。那么问题来了，一级菜单和二级菜单应该是超级相关联的，如果分开存储再去建立关系很麻烦，所以存在一个数组对象中，那么也就是说，不管多少级菜单都可以这样，又方便还不需要我们自己去建立相关关系。2、‘^’ 的变化，最开始想着不同状态用v-show去操作dom...

vuex的由来：在父子组件通信中，只有父组件通过props向子组件通信，传递数据，而子组件不能向父组件传递数据。这时候就出现了vuex。vuex作为数据的管理，将共享的数据单独的列出来，做一系列操作。通过注入到根组件，全局可用。vuex有五大核心：state：共享的状态（-对象形式）getters：为了取得state的状态，就有了getters，getters对...

今天在写项目的时候遇到的问题：代码如下：<template> <div class = "a">{{time}}</div> <test-component></test-component></template>报错如下：意思是说：组件模板应只包含一个根元素。如果在多个元素上使用v...

Vue的内置组件component作用：渲染一个“原组件”为动态组件。依is的值，来决定那个组件被渲染props:is: -string|ComponentDefinition|ComponentConstructorinline-template: -boolean用法：动态组件由 vm 实例的属性值 componentId 控制<component :is="comp...

全局配置Vue.config 是一个对象，它包含了所有Vue的全局配置。可以在启动应用前修改配置slient —取消Vue所有的日志与警告类型： boolean默认值： false用法： Vue.config.slient = trueoptionMergeStrategies —自定义合并策略的选项类型： { [key: string]: Function }默认值： {...

vuex 状态管理vuex是vue.js应用程序的状态管理模式。集中式存储管理应用所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。状态管理模式new Vue({ //state: 驱动应用的数据源 data () { return { count: 0 } }, //view： 以声明方式将state映射到视图 templat...

问题描述：当computed中的属性是从store.state中获取的时候，我们拿到的属性值是store中state的初始值还是getters计算后的值？问题发现：页面中渲染是19，而vue-devtools中state还是18 引发的思考这是Store中的state和getters这是组件中的computed页面上展示的结果是：我打印thi...

动态路由匹配响应路由参数的变化路由参数配置const router = new VueRouter({ routes: [ //动态路由参数，以冒号开头 { path: '/user/:id', component: ComponentName } ]})路由参数获取$route.params.id路由中设置多段路径参数，对应的值都会设置到$ro...