lixiaosenlin的专栏

前言小伙伴们大家好。前一篇文章中我们学习了ES6中新增的Reflect对象，了解了该对象的一些特点以及设计目的，最后还对该对象上的一些静态方法做了一个简单介绍。接下来将对这些方法进行一个展开分享。Reflect.get(target, key, receiver)Reflect.get()方法查找并返回target对象中的key属性，如果没有该属性则返回undefined，该与target[key]读取属性类似，但它是通过一个函数执行来操作的。Reflect.get方法接收3个参数：ta

前言小伙伴们大家好。前两篇文章中为大家分享了es6中新增的Proxy。今天将继续给大家分享ES6中新增的知识点 - Reflect。什么是Reflect呢，Reflect又是干什么的？下面为大家揭晓。ReflectES6为了能够更好的操作对象而新增了Reflect，它是JS中的一个全局的普通的对象，它的原型就是Object。Reflect翻译过来是反射的意思，那么为什么会取名为Reflect呢？是因为Reflect提供了一系列方法，开发者可以通过调用这些方法访问一些js底层的功能，由于它类似于其

前言小伙伴们大家好。前面一篇文章中我们对ES6中的Proxy进行了一个简单的分享。通过学习我们知道Proxy可以对对象进行拦截，从而可以根据业务需要做一些对应的逻辑处理。我们还知道Vue3.0对数据劫持做了一个很大的优化其中用到的就是Proxy。在文章的结尾我们还整理出了Proxy提供的支持拦截操作的一些实例方法。本章我们就抽取几个常用的拦截方法进行一个分享。get(target, propKey, receiver)看过上一篇文章的小伙伴应该都注意到了：在我们代码案例中用到最多的拦截方法就是g

前言小伙伴们大家好。在ES5中有个Object.defineProperty()函数可以用于对对象的属性进行劫持，或者给对象新增一个属性等操作。看过Vue2.0源码的小伙伴应该都知道，其中数据响应式原理就用到了Object.defineProperty这个方法对属性进行了劫持处理。但是我们今天的重点不是Object.defineProperty，而是ES6中为我们新提供的一个类 - Proxy。之所以先提到Object.defineProperty函数，是因为我们接下来要分享的Proxy提供的有些功能跟

前言小伙伴们大家好。前面我们分享了一篇关于对象操作的几个Symbol的内置属性。比如实例检测的Symbol.hasInstance，对象类型转换的Symbol.toPrimitive和检测数据类型的Symbol.toStringTag。这几个都是跟对象操作相关的。接下来再分享几个跟字符串操作相关的Symbol内置属性：Symbol.match、Symbol.replace、Symbol.search和Symbol.split。Symbol.match相信大家对String.match()这个函数

前言小伙伴们大家好。今天继续分享Symbol相关的小知识。相信小伙伴们对instanceof，Object.prototype.toString，Number({})，String({})这些都不陌生吧，但小伙伴是否知道当我们使用这些东西时，其实多多少少都会跟Symbol有些许的关系。下面我们就来看一下到底有什么关系呢。其实在日常开发中，除了能够定义自己使用的Symbol值以外，ES6还为我们提供了一些内置的Symbol属性值，指向语言内部使用的一些方法。Symbol.hasInstance对

前言小伙伴们大家好。上一篇文章我们分享了ES6中新增基本数据类型Symbol的用法及特点。通过上一篇的学习我们知道：用Symbol方法创建出来的Symbol值都是独一无二的，即使传递了一模一样的参数，那么如果有时候我就是想要创建一个相同的Symbol有没有办法呢，答案是肯定的。接下来将给大家分享一个能够创建相同Symbol值的方法。Symbol的方法Symbol.for()有时候我们就是希望传递相同的参数就能够创建出相同的Symbol值来使用。Symbol为我们提供了一个方法：Symbol

前言小伙伴们大家好。不知道大家有没有遇到这样一种情况：在我们日常开发中，有时候可能会用到一些别人提供的对象，并且业务需要想要在这个对象的基础上进行一些扩展，添加一些属性或方法等。这个时候如果我们不了解对象结构的情况下，冒然去扩展，很有可能就会跟对象原有的属性或方法发生冲突。因为在ES5中对象的属性名都是以字符串的形式命名的，这就很容易造成属性名的冲突。而我们接下来要分享的小知识便可以很好的解决这一问题。那就是ES6中新增的一种原始数据类型 - Symbol原始数据类型SymbolSymbol是E

前言小伙伴们大家好。前面我们已经对Set、WeakSet、Map、WeakMap四种数据结构的特点及用法分别做了分享和介绍。为了让小伙伴们能够更直接的理解4种数据结构的异同，本篇文章将会对这四种数据结构的特点做一个统一的汇总和对比。特点SetSet本质是构造函数，可接收一个数组（或者具有 iterable 接口的其他数据结构）作为参数用来初始化SetSet中的值可以是任意类型的，但必须不能重复，所有值都是唯一的，因此可以用来进行数组去重使用Set中认为NaN和NaN是同一个值，因此Se

前言小伙伴们大家好。前面的我们已经学习了ES6中的3个关于数据结构的知识了，分别是Set、Map和WeakSet。今天要给大家分享的仍然是关于数据结构的WeakMap。从名字上看这个WeakMap并不陌生，因为既有我们前面学过的WeakSet中的Weak又有Map中的Map，所以想想WeakMap一定有跟WeakSet和Map相似的地方。下面就让我们具体来分析一下吧。WeakMapWeakMap的结构与Map的结构类似， 也是用于生成键值对的集合。WeakMap虽然与Map类似但是也有着自己的特

前言小伙伴们大家好。上篇文章中为大家详细分享了ES6中的Map数据结构，本篇文章将在上一篇文章的基础上对Map做一个补充。关于Map还有一个知识点没有分享到，就是关于Map和其它类型的互相转换。通过上篇文章的学习，我们了解到Map是ES6为我们提供的一个很强大的数据类型。那么在使用的过程中难免会遇到与其它类型打交道的操作。下面我们就来看下Map与其它几个类型互相转换的一些常用操作。Map与数组互相转换大家都知道数组在我们日常开发中是必不可少的一个数据类型了，就在我们上一篇文章分享Map使用的时

前言小伙伴们大家好，前面我们已经学习了es6中的Set和WeakSet两种数据结构，今天将给大家分享es6为我们提供的另一种数据结构Map。大家都知道在JavaScript的对象（Object）中，只能用字符串类型作为对象的key，即使我们在写的时候用了其它类型的key，那么Object也会自动把它转换为字符串类型。但有时候由于业务需要，我们想用一些其它类型来作为对象的key，比如说dom对象，这个时候Object显然已经无法满足我们的需求了，因为dom对象最终会被转换为字符串类型[object HT

前言小伙伴们大家好。前面一篇文章中我们已经分享了一个ES6中的数据结构Set，掌握了Set的一些特点和方法，相信对我们日后开发一定会有很大的帮助。接下来我们再来看es6中与Set非常类似的另外一个数据结构WeakSet。WeakSetWeakSet 数据结构与Set类似，也是不重复的值的集合，同时也是一个构造函数。但有2点不同：WeakSet的值必须都是对象并且WeakSet是不可遍历的。WeakSet的特点及用法如下：WeakSet也是一个构造函数，可以用new来创建WeakSet数据结构

前言小伙伴们大家好，今天开始要跟大家分享的是关于ES6系列的相关知识。前端的小伙伴都应该知道，自从es6发布后，为我们提供了很多新的的语法和方法，也使得我们在开发过程中更加高效更加便利。接下来就将给大家分享一下es6新语法中关于数据结构的Set和Map方法。SetSet是es6中提供的一种数据结构，它类似数组但与数组不同的是，它的值都是唯一的没有重复值。Set有如下特点和作用：Set本质也是一个构造函数，因此在使用时需要new，同时Set可以接收一个数组（或者具有 iterable 接口的其

前言【一天一个小知识，每天进步一点点】小伙伴们大家好。上一篇文章Vue2.0源码解析 - 知其然知其所以然之keep-alive原理分析（一）中已经对keep-alive源码的整体框架了做了一个简单的梳理，知道了keep-alive工作的一个大体流程，今天我们我将继续对keep-alive一些核心的源码进行展开分析。cacheVNode上篇文章中提到了在methods中定义了一个cacheVNode函数，用来做虚拟DOM的缓存，下面就来分析一下它的源码：methods:{ cacheVNo

前言【一天一个小知识，每天进步一点点】小伙伴们大家好。上一篇文章Vue2.0源码解析 - 知其然知其所以然之keep-alive给大家分享了Vue2.0中关于内置组件keep-alive的作用和用法，通过学习让我们知道原来vue中的组件也是可以缓存的，不是每个组件都必须得销毁。那么知道了keep-alive的作用和用法了，不知有没有小伙伴好奇：它是怎么实现缓存的呢，它的原理又是怎样的？接下来即将为大家揭晓。keep-alive整体源码解读前面我们说过，keep-alive是vue中的一个内置组件

前言【一天一个小知识，每天进步一点点】小伙伴们大家好，今天将要给大家分享是Vue中关于组件缓存的一个内置组件 - keep-alive不知道小伙伴们有没有遇到这样一种情况，在我们的项目开发中，有时候会利用弹出框做一些表单提交的操作，但有时候填着填着鼠标不小心点了一下弹出框以外空白的地方，导致弹出框关闭了，当再次重新打开弹出框的时候，发现之前录的信息全都不见了，是不是瞬间就不淡定了呢。这个时候我们的内置组件keep-alive就会派上用场了。接下来我们就一起分析下keep-alive是干什么用的，它的实

前言小伙伴们大家好。用过Vue的小伙伴都知道，在我们进行Vue开发时，避免不了会使用一些第三方的库，比如说ElementUI组件库。当我们导入好这些组件库后会执行一个Vue.use函数，然后把导进来的组件库作为参数传给该函数。这样就可以在任何页面中都可以随意的使用组件库中的各种组件了。如果不去执行Vue.use函数，那么即使组件库被导进来，那么内部的组件还是无法使用的。小伙伴们有没有想过这是为什么呐，Vue.use函数的原理又是什么呢，在它的内部都做了什么？接下来我们就为大家来一一解答。Vue.u

前言小伙伴们大家好，在上一篇文章Vue中两个让你幸福感爆棚的组件导入小技巧之循环代替Ctrl C/V（独家总结）中我们已经学习了一个注册全局组件的小技巧，使得我们在注册大量全局组件时不再被Vue.use或Vue.component所霸屏。不知道小伙伴们看了以后幸福感有没有提升呢，如果觉得还不过瘾，那么接下来的这个连import都可以省略的小技巧会不会让你怦然心动呢？我们今天要分享的是一个webpack为我们提供的能够获取特定上下文的api函数require.context。require.cont

前言小伙伴们大家好，今天要跟大家分享的是能够提升幸福感的关于组件导入的两个小技巧。做前端开发的小伙伴都知道，当前前端中有两大流行的框架Vue和React。而现在的前端开发中大部分公司用的也都是这两大框架。那么不管是用的vue还是react都离不开第三方的UI组件库，比如elementui、ant-design和vant等等。既然用到了第三方库，那么势必就少不了安装、导入和注册，然后才能使用，接下来我们就以vue+elementui为例来分享一下如何提升幸福感。按需导入的瑕疵在我们使用eleme

前言大家好，目前为止，六大常用自定义指令已经接近尾声了。那么今天即将出场也是最后一个隆重出场的便是我们的图片懒加载的自定义指令v-lazyload了。先来简单介绍下，为什么要用图片懒加载而不是直接加载？小伙伴们应该都知道，在前端中向引入外部css文件，JavaScript文件以及一些图片资源等等都是需要发送单独的http请求的，而http请求多了势必会影响到页面的性能，如果一个页面有大量的图片需要加载，如果不采用懒加载的话，就会需要大量的http请求从而占用了页面其它资源的正常请求进而就会影响到了页面

前言大家好，截至目前大厂中常用的六大vue自定义指令我们已经搞了四个了，今天就来继续搞六大常用指令中的第五个指令 - 权限校验之v-permission。在我们日常开发中权限校验是必不可少的一个环节，尤其是对于一些应用系统或一些中后台的开发，更是需要用到权限校验的。那么权限校验也有很多种类，比如菜单权限、组件权限甚至是小到元素权限等等，本文我们就将以元素权限为例，实现一个简单的权限校验自定义指令。在有一些场景中我们可能会根据用户登录后所拥有的权限来决定哪些元素该显示，哪些元素不该显示。比如我们最常

前言截至目前，一线大厂常用的6大vue自定义指令中，我们已经学习实现了3个了，而其中上一篇一线大厂常用的六大vue自定义指令合集之防抖v-debounce中的自定义防抖指令与我们今天要学习的节流自定义指令除了函数不一样，其它的基本上是一模一样。下面让我们一起来揭开它的面纱吧！关于javascript中是如何实现节流，这里不再过多赘述，感兴趣的小伙伴可以查看这篇web前端高级JavaScript - 函数的防抖和节流文章了解更多。本篇文章主要介绍如何实现一个节流的自定义指令，下面我们就来分析一下大体实

const config = { bind(el,binding){ let val = binding.value, wait = 500, immidiate = false, type = 'click', params = [], func, handle = binding.name === 'debounce'?debounce:throttle; if(val == null) return; if(typeof val !== 'objec

前言前面我们已经讲了一个点击自动复制文本的自定义指令。今天我们再来说一个关于限制输入的自定义指令。先来了解一下什么是限制输入呢？其实就是针对用户的输入行为做一个合理合法的校验，排除一些不符合规则的输入。在h5的input标签中已经为我们提供了一些输入限制的类型，比如color，date，email，number，tel等等，如果是一些简单的输入验证，使用这些自带的类型已经足够了。然鹅，有时候根据一些业务需要，这些单一的输入限制可能无法满足我们的业务需求，这时就不得不定制一套灵活的输入限制了。如果仅仅是

前言前面的文章中我们已经对vue2和vue3中自定义指令的语法和钩子函数分别做了梳理和介绍。光说不练假把式，接下来我们就来实战一下，同时也看一看一线大厂们常用的自定义指令有哪些。今天要实战的是自动复制文本到剪切板的自定义指令。不知道小伙伴们有没有遇到过这样的情况，当我的鼠标去点击一个文本的时候，这个文本就会自动复制到了剪切板里了，然后就可以想往哪粘就往哪粘了，妈妈再也不用担心我的复制粘贴了。言归正传，下面我们将以vue3.0为例来分析和实现一下自动复制功能思路分析要想实现文本的自动复制，我们需

前言前面一篇文章Vue2.0如何实现一个自定义指令（搜一贼）中我们已经对2.0中自定义指令的语法和钩子函数以及钩子函数中的参数进行了梳理，最后还实现了一个非常简单的文本框自动聚焦的小案例，接下来这篇文章我们将梳理一下vue3.0中自定义指令是如何实现的，3.0相较于2.0又发生了哪些变化。vue3.0自定义指令其实3.0中自定义指令的语法没有什么太大变化，唯一的变化就是在2.0中是通过Vue.directive()来实现一个全局的自定义指令，而3.0中不再使用Vue了，而是通过函数createA

前言在之前的一篇文章中，我们已经对Vue2.0和3.0中的生命周期（钩子）函数进行了梳理和对比，并发现在3.0中还是有很大的变化的。接下来这篇文章我们将梳理一下Vue2.0中自定义指令是如何实现和定义的。后面还将继续梳理3.0版本中自定义指令的实现以及与2.0版本的一个对比。vue2.0自定义指令我们知道vue为我们提供了一套强大的内置核心指令，像v-for，v-model等等，那么除了这些核心的内置指令外，有时候根据业务仍然需要对普通 DOM 元素进行底层操作，这时就需要用到一些自定义指令了，

前言做前端（尤其是Vue技术栈）的同学应该都知道，vue3.0已经来很长一段时间了，虽然现在市面上用vue3的人还不多，但是随着技术的不断发展，相信vue3取代vue2也是迟早的事。所以不管现在是否用得到，3.0的一些知识还是有必要学起来的。下面就从最基本的生命周期（钩子）函数开始对vue2.0和vue3.0进行一个简单的梳理和对比Vue2.0生命周期函数我们知道在2.0版本中主要有8个比较的生命周期函数，另外还有2个跟keep-alive组件相关的，下面我们就分别对每个函数做一下简单的介绍