hkduan的博客

react和vue区别

vue3优化总结

websocket使用

前端图表插件1.echarthttps://echarts.apache.org/examples/zh/index.html2.amcharthttps://www.amcharts.com/demos/#hierarchy3.g6http://antv-2018.alipay.com/zh-cn/g6/3.x/demo/tree/tree-dendrogram.html

签合同，要分三步：1.创建新建合同 2.设计合同内容结构 3.要遵守合同的行为规范（对应创建，结构，行为三部分）口诀：单原二厂建 (创建类的5个模式，二厂是指简单工厂和抽象工厂)桥(帮)组享外带装适 (结构类的6个模式)观摩(模)命职状房(访)中洁厕(解策)备跌(迭)设计模式主要分三个类型:创建型、结构型和行为型。创建型有：一、Singleton，单例模式：保证一个类只有一个实例，并提供一个访问它的全局访问点二、Abstract Factory，抽象工厂：提供一个创建一系列相关或相互依赖

设计模式的五大原则。简称：SOLID单一职责原则 (Single Responsibility Principle, SRP)含义：一个类只负责一个功能领域中的相应职责。栗子：餐厅服务员负责把订单给厨师去做，而不是服务员又要订单又要炒菜。好处：降低类复杂性降低，提高代码可读性，提高可维护性。开闭原则 (Open-Closed Principle, OCP)含义：软件模块应该对扩展开放，对修改关闭。在程序需要进行新增功能的时候，不能去修改原有的代码，而是新增代码。栗子：一开始做了普通计算器程

1、返回对象结构const mapObj = { a: ‘1’, b: ‘2’,c:‘3’ };2、前端接收，默认为对象3、转换为ES6 map对象const map = new Map(Object.entries(mapObj));4.访问：map.get(‘a’)5、Apimap.entries()：返回所有成员的遍历器。map.forEach()：遍历 Map 的所有成员特点：不管map多大，访问速度不变。...

hash值，也叫散列函数。释义bai：通过一定的哈希算法（典型du的有MD5，SHA-1等），将一段较zhi长的数dao据映射为较短小的数据，这段小数据就是大数据的哈希值。他有这样一个特点，他是唯一的，一旦大数据发生了变化，哪怕是一个微小的变化，他的哈希值也会发生变化。另外一方面，既然是DNA，那就保证了没有两个数据的哈希值是完全相同的。哈希值的作用：哈希值，即HASH值，是通过对文件内容进行加密运算得到的一组二进制值，主要用途是用于文件校验或签名。正是因为这样的特点，它常常用来判断两个文件是否相同。

2个BUG调试经历：1.第二次点击"数据集"，弹出面板后，console里面报错分析：第一次没问题，第二次有问题，v-if显隐渲染DOM引起所以吧V-IF改成V-SHOW第二个问题：第2个bug.点击"服务详情"，弹出面板数据没有刷新，但是console里面的数据是对的MyModule.vue 654行 console.log(ele.name, queryJson.modelVersion)代码中 v-show 改成v-if因为子组建数据没被监听到，必须重新让它渲染commi

选择地点，一次呈树形状铺开，可以多选，可以删除，支持搜索安装：npm install --save @riophae/vue-treeselect官方提供了不同情况下的使用，可以按照需要设置https://www.vue-treeselect.cn/vue-ztree-2.0https://gitee.com/hkduan/vue-ztree-2.0...

单点登录配置：1.新增5个文件utils/auth.js. utils/sso.js. utils/store.js.premission.js.api/login.js其他修改如下：2.具体修改内容截图2.1 login.js2.2 UserMenu.vue2.3 router.config.js2.4 user.js2.5 auth.js2.6 request.js2.7 sso.js2.8 store.js2.9 premission.js

https://blog.csdn.net/qq_36784628/article/details/116712548?ops_request_misc=&request_id=&biz_id=102&utm_term=eslint%20vue%20%20vscode%20%E8%87%AA%E5%8A%A8%E6%A0%BC%E5%BC%8F%E5%8C%96&utm_medium=distribute.pc_search_result.none-task-blog-2al

细节篇1.vue插值表达式，用双花括号{{msg}}react用单花括号，只有里面是对象时，里面的花括号代表对象{{fontSize: '30px', color: 'blue'}}2.vue用 template模板react用js，class里面，然后render函数， jsx语法3.vue state data数据可以双向绑定v-modelreact不能双向绑定，用setState设置，组件用 onChange={this.onInputChange }onInputChange =

vue优化方案:1、函数形组件（functional),没有生命周期.2、子组件拆分（利用组件内部运行，不影响其他外部组件）3、computed4、用v-show，不用v-if（v-if操作dom结构，性能低）5、用keep-alive（缓存页面）6、用mixins（mixins引入的js后执行，延迟装载Defer）7、time slicing 分批处理（用requestAnimationFrame定时器，分批次执行list,防止一次性执行list太大阻塞页面渲染）8、非响应式模式（不要直接

new vue({})1.Init events&lifecycle //只有默认的一些生命周期和默认的事件，此时的data，methods，el等等都不存在，还没有初始 化数据2.beforeCreate() //钩子函数运行，但是此时的vue是一个空壳。我们尝试使用beforeCreate函数输出data和methods中的数据是空的初始化数据阶段3.init injections&reactivity//在这个阶段已经初始化了数据和事件，包括data和methods，但是还.

vue3用vite替代webpack打包$ npm init vite-app 或者用 npm create $ cd $ npm install$ npm run dev用createApp方法，链式调用use()，最后挂载到dom上：mount(#id)import { createApp } from 'vue'import App from './App.vue'import router from './router'import store from './store'im

组件开发一、父子组件通信1.props//childprops:{msg:String}//parent2.特性$attrs.父级字段名//child{{$attrs.foo}} //parent3.refs//parentmounted(){this.$refs.hw.xx = ‘xxx’}4.children//parentthis.$children[0].xx = ‘xxx’ // 下标是无序的二、子传父// childthis.emit(′add′,

vue打开慢，有空白的时间，优化方案：1.看看你的依赖包是不是全局引入的，改为组件内按需引入，可大大降低加载时长。或者将组件引入方式改为cdn引入。需要注意的是，两种引入方式不能共存。2.看network，点击ALL，看看哪些文件加载时间长，针对性的优化，静态文件压缩、js文件切片等3.使用compression-webpack-plugin插件，修改配置文件，production环境下对超过10k的文件进行压缩，nginx部署时开启gzip或者服务端渲染SSR，用nuxtjs...

vue2用defineProperty({},key,handel)缺点：Object.defineProperty() 无法监控到数组下标的变化，对象的增加。对于新增加的属性，需要再手动初始化才能被监测。通过 Vue.set()和 Vue.delete来实现响应式的。需要重新执行observe(arr)，遍历，影响性能。function defineReactive(data, key, value) { Object.defineProperty(data, key, { enumerable

1.vue由于javascript的限制，对象属性的增加和删除，不能及时更新视图view因为若一个对象的属性没有在data中声明，则他就不是响应式的。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，这样的话这个对象属性就是响应式的。而执行这个过程必须在data中声明才会有。var vm = new Vue({ data:{ a:1// vm.a 是响应的 }})vm.b = 2;// vm.b 是非响应的可以用set来解决这个问题

var CancelToken = axios.CancelToken;var source = CancelToken.source();axios.get(’/user/12345’, {//get请求在第二个参数cancelToken: source.token}).catch(function(thrown) {});axios.post(’/user/12345’, {//post请求在第三个参数name: ‘new name’}, {cancelToken: source.to

一、二、Pomise.all的使用Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。需要特别注意的是，Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，即p1的结果在前，即便p1的结果获取的比p2要晚。这带来了一个绝大的好处：在前端开发请求数据的过程中，偶尔会遇到发送多个请求并根据请求顺序获取和使用

this.$router：表示全局路由器对象，项目中通过router路由参数注入路由之后，在任何一个页面都可以通过此方法获取到路由器对象，并调用其push(), go()等方法；this.$route:表示当前正在用于跳转的路由器对象，可以调用其name、path、query、params等方法；...

gitlens插件可以直接在光标处显示代码编写人以及时间；方便共同开发时候git做版本控制时候的相关代码管理。git history查看更新日志

Vue 不能检测以下数组的变动：当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue当你修改数组的长度时，例如：vm.items.length = newLength举个例子:var vm = new Vue({data: {items: [‘a’, ‘b’, ‘c’]}})vm.items[1] = ‘x’ // 不是响应性的vm.items.length = 2 // 不是响应性的为了解决第一类问题，以下两种方式都可以实现和 vm

子组件通过input框修改父组件数据用到了.sync双向绑定数据一、child.vue代码如下：<template> <div style="width:200px;height:200px;background:red;"> 我是helloWorld模块的子组件 <button @click="$emit('update:isShow',false)">我是子组件的按钮点我隐身</button> <input v-mo

npm install jest -D // 安装测试框架npm run test或者在package.json配置，响应式测试：“scripts”: {“test”: “jest --watchAll”}Jest中常用的匹配器toBe()匹配器：toBe匹配器用来比较原始值或检查对象实例的引用一致性，类似于 ‘Object.is’ 方法和 ‘===’.// toBe匹配器test('测试 结果是否等于 "abc"', () => { const a = 'abc'; e

微前端解决的问题1.随着前端的模块增加的时候（比如几百几千个），前端的路由没办法去更好维护路由系统，模块系统2.解决不同团队跨技术栈开发，每个团队一个spa页面，一套技术栈3.主要是一种思想，一种架构实现。解决方式：iframe+spajs微前端+spawebcomponent...

1.路由参数解耦2.函数式组件3.样式穿透4.watch高阶使用5.深度监听6.触发监听执行多个方法7.watch监听多个变量8.事件参数$event9.自定义组件双向绑定10.监听组件生命周期11.手动挂载组件

vuex复习一、map*mapState mapGetters {{num}} {{getNum}}mapMutation mapActions {{num}} {{getNum}}二、state类似于组件的data，存储数据。页面刷新就没了三、mutations通过commit修改state数据四、action通过dispatch监听事件，然后再修改mutation里面的方法，最终修改state数据五、module.........

vue hook应用场景:实现了mixins的功能，并且解决了mixins的两个问题允许相互传递状态明确指出了逻辑来自哪里使用 Hooks，函数的返回值会记录消费的值。vue-hooks是简化组件定义、复用状态逻辑的一种最新尝试，且结合 Vue 实例的特点提供了适用的 Hookshooks.js中的this为当前vue实例react-hookshooks只能出现在函数作用域的顶级，不能出现在条件语句、循环语句中、嵌套函数中。一、父组件监测其他组件的生命周期<Child @hook:

npm run build后，打开一片空白，解决办法。方法一：npm install -g serve# -s 参数的意思是将其架设在 Single-Page Application 模式下# 这个模式会处理即将提到的路由问题serve -s dist方法二：https://www.jb51.net/article/184694.htmvue.config.jsmodule.exports = {publicPath: ‘./’,}...

//while一直循环，直到结束后，才跳到主任务。主任务才执行渲染。button.addEventListener(‘click’,event=>{while(true)})document.body.appendChild(el);el.style.display=‘none’;//setTimeout不会阻塞渲染。function loop(){setTimeout(loop,0);}loop();requestAnimationFramefunction callback

pubsub 最基础 的使用方法react和vue的组件通信都可以用这个第三方pubsub.js发布import Pubsub from 'pubsub-js'export const pubsubID = 'd806a360-21aa-406e-9e5f-7f375087514f' // pubsub tokenPubsub.publish(StationStatisticsID, data)// 或PubSub.publishSync(StationStatisticsID, data)

更快虚拟DOM重写优化slots的生成静态树的提升静态属性提升基于proxy的观察者机制更小优化核心库体积更容易维护使用:TS+模块化更加友好跨平台，pc,安卓，苹果一起使用

自定义v-modelnextTickthis.$nextTick(()=>{})渲染dom后调用，多次修改dom，也只执行一次有点像react的setState的第二个参数，回调函数。slot作用域插槽动态异步组件动态组件，一个组件可以赋值给多个类型的元素。动态获取数据，如for循环多个组件，活着点击加载不同的组件内容keep-alive包裹组件mixin多组件相同state数据的管理vuexstate,getters,mutation,action原理:组件通过a

Vue实现页面刷新（不闪白）普通方法：location.reload();this.$router.go(0);这两种方法会强制刷新页面，会出现短暂的空白闪烁使用 provide和inject这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。简单来说就是子孙组件可以访问到祖先的对象方法。在 App.vue 文件里写入provide的方法<!--页面级Vue组件--><template>

vue-cli3.0移动端屏幕适配vm vh适配方案npm i postcss-px-to-viewport -save -dev配置package.json"postcss": { "plugins": { "autoprefixer": {}, "postcss-px-to-viewport": { "viewportWidth": 750, "minPixelValu

一、react跨域配置：\node_modules\react-scripts\config\webpackDevServer.config.jsproxy: { "/api": { target: "https://suggest.taobao.com/sug?code=utf-8&q=", changeOrigin: true, // 是否跨域 "pathRewrite": { "^/api": "/"

代理设置在根目录下新建一个 vue.config.js 文件，拷贝如下代码特别注意：your api 就是请求后台域名后的相同部分，我理解vue实现是key-value方式，此处如果是 “/test/api/”: { }，那么请求的时候 /test/api/getUserInfo，就是地址 target + /test/api/getUserInfo，若请求key对应不上则代理就会无效了。module.exports = { configureWebpack:{ resolve:{