qq_38935512的博客

安装 devDependencies{“@babel/plugin-transform-runtime”: “^7.18.6”},安装 dependencies:{ “babel-polyfill”: “6.26.0”,}其实就是 兼容async/await的语法 的babel 没有配置 或者配错。配置文件babel.config.js。

live-server 是一款 npm 工具，全局安装 npm i -g live-server 后，项目目录使用 live-server 命令行命令便可直接在浏览器中预览（默认找 index.html，其他需要带上文件名空格后跟在后面），并且自动全局监听实时更新。关于live-server配置 可以在setting.json 中去配置 可以百度一下它的属性。

需求：时间选择不能大于今天，选择的范围是1个月。

vue3.0的变化汇总

使用：直接引入js, 在el-dialog上只是使用v-dialogDrag 就可以了，斜角拉升 有点问题，建议注释掉，我下面已经注释了。自定义一个指令，下方代码直接使用，针对的是element 弹窗。

element 的el-select组件没有直接提供下拉分页加载，实际业务当中会有一些数据量比较大的下拉框可以采取分页选择。下面的200这个值是下滑到百分之多少触发请求，可以自定义。

写一个步骤条 直接上代码 直接使用就可。

vue3

element的表格组件打印或者导出pdf 存在最大的宽度 需要写样式覆盖。代码 css 在页面里通过样式穿透来设置下。

ruleForm.rtcUrl. 初始化是个数组[]

我们使用的是内网，图中sentry-cli的下载地址访问不了，这个地址前端yarn-lock中也不是这个下载地址，一直找运维解决。后面百度方法设置下淘宝镜像就ok了。在跑yarn时先跑一遍下面代码就可以了。......

弹窗组件需要使用计算属性来过渡，不然直接使用自定义事件去改变show可以是可以，但是element右上角自带的关闭会报错（还是能关闭的）

需求需要展示附件，在表格中，使用自己封装的组件回显。

需要循环的部分

问题：组件a 组件b 组件c，组件a的slot传递到组件c

前言多人开发中统一得代码风格和规范是必不可少得，以前很不喜欢用eslint，各种报错,但在团队中用eslint去规范代码行为是非常有必要得，不过就我个人而言，这一套格式化得规范往往在我们去新公司得时候项目就已经有团队leader或其他同事弄好了，对这具体得操作也没有去做过整理，半知半解得，这里下面就整理下，以vue为例，往往vue项目分两种 vue-cli2创建得项目记录下eslint+editorconfig+prettierrc+vetur 介绍下这4个 eslint：代码检测工具 edit

v-for v-if/v-else-if/v-else 使用key=====vue3key在vue中得作用都是精准定位到需要修改得元素，两个 虚拟dom节点 的 key 如果一样就不会重新创建节点，而是修改原来的节点）v-for 和 v-if 不要一起使用（Vue2）v-for优先级高于v-if，先循环后判断，浪费性能，VUE3中是解决了这个问题，v-if优先级高于v-for合理的选择 v-if 和 v-show对于频繁需要切换得DOM元素 使用v-show， 因为DOM操.

https://www.cnblogs.com/gxunique/p/11168869.html

https://www.jianshu.com/p/f9b1183b13af

{ label: "操作", attrName: "caozuo", width: 180, align: "center", render: (h, params) => { // 根据组件名获取下组件 return h("div", [ h(resolveComponent("

联动选择框组件例如：街道 楼栋 小区存一下代码直接用数据结构：解释下为啥要这3个参数，其实可以一个得 例如： url：”、api/xxx/xxx?a=1&bb“ 项目特殊所有分三个参数baseUrl: 基本得接口请求paramsUrl: 参数 addrCodeLevel=5&parentCode$street &后面可以自己定义方便解析dataUrlDes: , 返回参数取label 值字段 和 value 字段{ width: 12,

vue3.0响应式得实现 以及和vue2得区别vue2，之前有分享过具体得源码解析这里不多讲了 1.数组下标长度修改不支持，同时修改了数组得原型链 2.使用watcher和dep得组合 3.使用Object.defineproperty，全部遍历属性vue3.0 下面代码都是自己写得总结一下整个思路 1.更好得支持了数组 2.使用了effect 替代了 watcher 3.使用了原生得new Proxy（）vue3中 reactive就是使用了proxy,最终调用得也是const

Monorepo 是什么？简单的来说，Monorepo 的核心观点是所有的项目在一个代码仓库中。这并不是说代码没有组织都放在 ./src 文件夹里面，二是在一个packages文件夹下分割成一个个相对独立的项目，在vue3.0中就是将各个功能单独抽离出一个个单独的模块，各自打包，又能互相引用。vue2中是只打一个包。类似于最终的效果vue3.0的打包效果：下面我们来大致实现下整个 monorepo模式的打包过程，大致了解下这种模式1.安装需要的插件yarn add typescript ro

问题分析：放在子组件中fixed 混乱，查窗口高端，定位尽然时根据父组件的高度去定位的。解决方案：1.将弹出窗口放在父组件中 以插槽slot的方式引入

问题：1.vue中改变数据之后无法立马通过DOM来获取数据，官方推荐nextTick来解决vue得数据更新，会开启一个异步队列，将所有得数据变化缓存进去，这里面会做一个去重处理，比如重复得watcher最后都只会执行1个，避免重复得DOM计算消耗性能。解决疑问 1.nextTick得实现原理 2.怎么确定nextTick是在DOM更新完毕再执行（这个问题我看了很多文章大致都只是讲了nextTick得原理，并没有实际讲出此问题。）前言：针对vue2.5之后得版本，2.5之前nextTick得

话不多说上源码，其实问题就是在于修改数组例如 arr=[1,2,3,4] arr[1]=2,类似这种直接用下标修改整个值得无效， 如果式arr=[{name:“aaa”}] arr[0].name="ccc"这种是可以得 arr[0]={name:“ccc”} 这是不行得** 源码**function set (target: Array<any> | Object, key: any, val: any): any { if (process.env.NODE_ENV

下方 obj 就是columns中得一项let obj = { title: item.name, minWidth: item.width, key: item.enName, sortable: item.sortable, sortMethod: (a, b, type) => { return this.$utility.sortFun(a, b, type) }, dataSourceList: item.dataSourceList || [], }

常用阵容 地府（1200）+2狮驼+方寸（1300）+雷音（龟速，最好能比龟速宝宝还龟）方寸带千，地府雷带龟，狮驼带吞队长狮驼：队长狮驼另一个狮驼：B狮驼下面顺序按照虎阵得位置排得第一回合开局魔兽碎甲，龟速卡辅助。 B狮驼岭人物：气冲斗牛宝宝：吞 地府人物：魔兽宝宝：卡自己 队长狮驼岭人物：气冲斗牛宝宝：吞 方寸人物：碎甲宝宝：卡自己 雷音人物：斩业火 （存珠子）宝宝：卡方寸第二回合场景：一般狮子倒地， 辅助上回合会被拉起

分析源码不求行行都懂，大致分析下watch得执行原理 在vue源码中找到initWatch基本得逻辑就是initWatch —> createWatcher() ----> vm.$watch() ----> new Watcher();**1.initWatch **function initWatch (vm: Component, watch: Object) { for (const key in watch) { const handler = wa

vue中是如何初始化methods得，看源码非常简单1.针对methods遍历，判断是否是函数，是否和props重名，是否在实例上存在相同名字2.vm[key] = 是为了将函数映射到实例上，再通过bind方法在改变this得一个执行，bind跟call得区别就是前者是等待执行，后者是直接执行。3.到此，我们可以在模板中直接访问方法，以及方法中得this直接访问vue实例...

目的：使其table中得每个单元格都能做到自定义新建一个组件 STable.vue<template> <el-table :data="list" style="width: 100%"> <el-table-column v-for="item in columns" :key="item.key" :prop="item.key" :label="item.ti

总结总结：computed初始化得时候会给每个成员分配一个watcher，用来监听，缓存结果，响应式数据还是通过Object.defineProperty来实现，里面得get方法中 1。watcher.dirty,当数据发生变化 dirty会为true（数据变化时会调用它自身dep中收集得watcher，来改变computed中对应得watcher。dirty），重新计算结果，2.收集了页面得watcher，所以当数据变化时，能直接通知页面更新。computed也跟data一样通过proxy方法映射到v

主要了解学习了它得一些核心思想和功能，深入了解它得一个数据驱动，响应式原理，watcher,dep,observe等一些简单得实现。（简化得方便于我们理解它得一个核心理念）vue得一个主要流程 （代码中得JGvue,我就直接说是vue了）初始化实例初始化数据data编译渲染过程和数据响应式watcher 和 dep 依赖收集，派发更新diff算法了解其他知识点完整得项目结构1.初始化实例准备一个html,这不多说就是一个html 文件 使用我们自己写得vue<html

发布一个npm 插件包https://blog.youkuaiyun.com/qq_38935512/article/details/115719636发布一个npm 组件库（写了两个）https://blog.youkuaiyun.com/qq_38935512/article/details/115730925https://blog.youkuaiyun.com/qq_38935512/article/details/103530099发布到npm 单独的vue项目https://blog.youkuaiyun.com/qq_.

目录前端微服务创建一个简单的vue项目改造项目新建一个发布的配置文件publish.js打包使用维护1.前端微服务所谓的前端微服务其核心就是集成，将多个不同的应用集成到一个主应用中，他们之间互不影响，独立开发。由此，在我们平常的项目管理中，项目会比较繁多，可以采用这种插件式的管理，将各个单独的模块打包发布到npm 或者私服（最好是私服安全），然后在主项目中 以插件的形式集成进来注意：下面说的是用vue-cli3来创建的项目发布，如果是之前的版本，可以参考我上两篇，来配置webpac

目录Npm登录使用webpack，然后写一些组件发布包使用1.登录1.npm login 输入账号密码邮箱（输入密码得时候命令行没反应得 不用管）2.如果是使用了淘宝镜像 执行npm config set registry https://registry.npmjs.org/ 切换Npm镜像源3.再次登录2.使用webpack，然后写一些组件1.随便找个文件夹 初始化 npm init 生成package.json文件2.新建 webpack.config.js 和 src

reactivereactive是vue3提供的一个响应试方法，本质是包装成来一个proxy对象(可以打印看看)，只能传对象，不然无法自动更新import {reactive} from "vue"setup(){ let obj=reactive({ list:[] })}refref其实底层的本质就是reactive，ref(1)===>reactive({value:1})判断方法isRef(xxx)isReactive(xxx)区别ref类型会自动添加v

1.diff算法得一个优化v2得diff算法是全量比较例如 <div><p></p><a></a></div> 数据发生变化 上一次得渲染DOM树 和 更新数据后得DOM树 diff算法全量比较（实际a变化，但是div p还是都会比较一编）v3得diff算法在创建DOM树得时候 动态数据会添加一个静态标记，这样对比得时候就直接对比有标记得就行了2.hoisStatic 静态提升v2中 不管元素是否参与更新，都会被

静默授权： 不需要用户点击确认，只能获取用户的openId非静默授权: 需要用户点击确认登陆，还能获取更多的用户信息

需求：app页面第一次进入 加载一个函数，返回到此页面不执行此函数解决方案：1.利用optionMergeStrategies 自定义一个合并策略.2.全局混入方法说下这个optionMergeStrategies。自定义合并策略，Vue.config.optionMergeStrategies 是配合mixin混入来使用得。vue有一套它自己得默认合并策略。比如方法合并成数组。如果需要修改可以重新定义它得methods ,Vue.config.optionMergeStrategies.met