淮北才子-CSDN博客

原创在vue3中使用vuex

vuex在中大型项目中的应用十分广泛，通常会把全局都用到的数据放在vuex中，方便其他页面进行使用，在项目中，vuex中存放的数据大部分与user_id，权限等信息相关，那么在vue3中该怎么使用vuex呢？带着这个问题，在本篇文章中，咱们一起分析下其实vue3中使用vuex和vue2使用vuex大体相同，都是通过state存放数据，通过mutations去改变vuex中的数据，对于异步的情况，通过actions提交mutations中的方法进而改变vuex中的数据，带着...

2021-12-09 22:51:22 14180 1

原创实现双飞翼布局

说到圣杯布局和双飞翼布局，始终都是面试的高频考点，问题方式也大同小异，比如，实现一个左右固定，中间自适应的布局；实现一个中间部分优先加载的布局…… 现如今，很多web端的应用，他们的布局方式都是圣杯布局和双飞翼布局，既然用到的这么多，那么，双飞翼布局是如何实现的呢？带着这个问题，咱们一起把他说道说道双飞翼布局的实现方式一、（position+margin+float）首先我们从上面简介部分得知，双飞翼布局是一个两边固定，中间自适应的布局，并且中间部分...

2021-12-06 23:55:27 968

原创 flex：1是什么？

说起左侧固定，右侧自适应；或者左右固定，中间自适应，大家想到的可能最多的就是通过flex弹性盒布局中的flex：1吧，那么flex：1究竟是什么呢？ flex：1是由flex-grow，flex-shrink与flex-basic组成，那么这三个属性对应的功能又是什么呢？①flex-grow：代表子元素占弹性盒的比例  <div class="grow"> <!-- flex-gr...

2021-12-06 22:35:49 5887 7

原创 vue 双向绑定实现原理

在前端发展的过程中，vue这个框架，成为了越来越多公司及工作者的选择。笔者认为vue设计最棒的一点，就在于他是响应式的，即数据变化，视图也跟着一起变化，那么vue的响应式，是如何实现的呢？这篇文档会带着读者一步步实现一个vue的双向绑定，这篇文章会解开你对vue双向绑定的所有雾水，下面就让我们一步步实现它一、实现目标及大体思路 1. 目标：其实目标非常简单，就是数据发生变化的时候，视图也跟着变化 2. 大体思路：首先解析到HTML模...

2021-12-02 21:56:35 856

原创 vue3 父子组件传值

现在距离vue3的诞生已经过了很长时间了，笔者也是近期才开始学习vue3。对比vue2来看，vue3在写法发生了不小的变化，最典型的例子就是vue3通过ref，或者reactive实现数据的响应式。因为ref和reactive的出现，使得vue3中父子组件的传值方式也发生了变化咱们先看下vue2中的写法父组件：<template> <div> <children :title="title" @getChildre

2021-11-15 23:11:30 9387

原创初探TS实现一个promise

关于手写实现一个promise，网上有很多相关的教程，这里推荐一篇文章Promise实现原理（附源码） - 简书，这片文章对promise的实现过程讲解的很明白1. 我们先来看下面这个代码，这个代码没有严格遵守Promise/A+规范，就是一个简易版的promise，这个代码可以更好理解promise原理（直逼原理）promise代码class MyPromise { status = undefined value = undefined reason = undefined

2021-11-11 14:13:03 2639

原创扩展实现element-ui中el-cascader全选功能

重所周知，element-ui中的cascader中，没有对所有子节点的全选功能。近期，公司项目有一个功能是，如果点击了全选，则选中所有子节点的功能；如果在全选状态下，取消了任意一个节点，则移除该节点和全部节点；如果在全选状态下，又点击了全选，则完成全不选的操作，即实现效果如下图1.1：从【选中部分节点】（或【所有节点都没有选择】）到【全选】的实现效果图1.2 从【已选中全部节点】状态到【取消...

2021-10-23 14:22:37 7885 8

原创浅谈javascript的性能优化

对于大型的项目，js的性能优化始终都是个重点解决的问题，并且在面试的过程中，js的优化也始终是个老生常谈的话题，今天这篇文章就围绕js的性能优化，展开短浅的分析，如在文章过程中有理解错误或者不到位的情况，也欢迎各位同学提出宝贵的意见1. 作用域意识首先看下面这些代码function foo() { let imgs = document.getElementsByTagName("img") for (let i = 0; i < imgs.length; i++) {

2021-09-24 23:26:38 308

原创 javascript数据类型转换百度面试题

这是前两天百度电话面试一面中的数据类型转化题，感兴趣的可以自己试试console.log('true+true='+(true+true)) // 2console.log('null+undefined='+(null+undefined)) // NANconsole.log('[]+[]='+([]+[])) //console.log('true+1='+(true+1)) // 2console.log('null+2='+(null+2)) // 2console.log('..

2021-06-27 15:03:13 230 1