weixin_43299180的博客

由于接入的有政府的项目，在这段时间需要把公司官网，小程序首页置灰；接到需求真的是一脸懵，不过百度之后恍然大悟，感叹 CSS3 是个好东西，也让我学会一个新熟悉 filter 滤镜；

随手记录一个小的组件：再写 H5 的时候遇到这样一个小的效果，文本超出一行右侧显示展开按钮，点击可以展开和收起超出的文本；效果很简单，这里记录一下，方便以后之间用；后面需要的时候还可以动态传入字体颜色、字号等属性；我这里是在 H5 项目中使用的，引用了插件会自动将 px 单位转化为 rem；

年底了，公司开始各种优惠券抽取活动，在 H5 页面实现一个点击抽奖活动，中奖是后端控制，根据接口返回最终抽中接口返回的奖项；

根据场景不一样，可以区分为整体校验和逐条校验；

对于习惯使用 Vue 框架的人来说，高阶组件（HOC）这个概念是相对比较陌生的；高阶组件在 React 框架中是比较常见的一个概念，但是 Vue 中也是可以使用到高阶组件的；高阶函数是为一个函数接受一个函数作为参数并返回一个新函数，使得新函数具有这个函数原先的功能又能够自定义的添加新的功能；高阶组件是一个将组件作为参数并返回一个新组件的函数‘；从这里来看，高阶组件其实是一个函数；因此高阶组件也具有高阶函数的一些特性；返回的新组件具有原组件的功能，同时也有了新自定义的功能；具体点高阶组件其实就是装饰者模式的应

项目中经常回使用到第三方的插件，那么我们如何自己来发一个 npm 包供自己使用呢？下面就从入门开始梳理一下 npm 包发布的流程；文章目录1、必备环境2、npm 源管理3、注册账号4、创建 npm 包5、自己的项目6、发包7、几个报错处理8、其他问题1、必备环境要使用 npm 需要先安装 node.js ，npm 是随同 node 一起安装的包管理工具，node下载地址：https://nodejs.org/zh-cn/download/2、npm 源管理npm 发包必须使用 npm 的源镜像，如

上一篇：Vue2.x 源码 - v-modelref 被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。文章目录`$refs` 的注册解析获取元素上的 `ref` 值总结$refs 的注册在函数 initLifecycle 上会往 vm 上设置一个 key 为 $refs 值为一个对象，在src/core/instance/lifecycle.js 文件中：fu.

上一篇：Vue2.x 源码 - event

上一篇：Vue2.x 源码 - transition-groupVue 里可以绑定原生的 DOM 事件，也可以绑定自定义事件；这里看看他的源码实现；编译1、在 parse 阶段，会执⾏ processAttrs ⽅法，它的定义在 src/compiler/parser/index.js 中：export const onRE = /^@|^v-on:/export const dirRE = process.env.VBIND_PROP_SHORTHAND ? /^v-|^@|^:|^\.|^.

上一篇：Vue2.x 源码 - transition上一章我们看来一下<transiiton> 组件的实现原理，它只能针对单⼀元素实现过渡效果，Vue 还提供了 <transition-group> 组件来实现多个元素/组件的过渡效果；<transition-group> 渲染一个真实的 DOM 元素；默认渲染 <span>，可以通过 tag attribute 配置哪个元素应该被渲染；注意：每个 <transition-group> .

上一篇：Vue2.x 源码 - keep-aliveVue 提供了一整套过渡的解决方案，<transition> 组件，我们可以利用它配合一些 CSS 样式很方便的实现过渡动画，也可以利用它配合 JavaScript 的钩子函数实现动画（v-if、v-show、动态组件、组件根节点）；文章目录1、源码实现2、props3、事件4、enter & leaveenterleave总结<transition> 组件作为单个元素/组件的过渡效果，只会把过渡效果应用到其包裹的.

上一篇：Vue2.x 源码 - 异步组件Vue 的组件提供了⼀个⾮常有⽤的特性 —— slot 插槽，它让组件的实现变的更加灵活。我们平时在 开发组件库的时候，为了让组件更加灵活可定制，经常⽤插槽的⽅式让⽤户可以⾃定义内容。插槽分为：默认插槽、匿名插槽 、命名插槽 和 作⽤域插槽，它们可以解决不同的场景，但它是怎么实现的呢，下⾯我们就从源码的⾓ 度来分析插槽的实现原理。Vue 2.6.0之后采用全新v-slot语法取代之前的slot、slot-scope文章目录默认插槽匿名插槽命名插槽作用域插槽.

上一篇：Vue2.x 源码 - 生命周期

上一篇：Vue2.x 源码 - computed 和 watch 的依赖收集和更新在 Vue 实例被创建之前都要经过一系列的初始化过程：数据监听、模板编译、实例挂载、DOM更新等；在这个过程中也穿插运行一下函数：生命周期函数；文章目录生命周期图示生命周期钩子怎么触发生命周期beforeCreate 和 createdbeforeMount 和 mountedbeforeUpdate 和 updatedbeforeDestroy 和 destroyedactivated 和 deactivated生.

上一篇：Vue2.x 源码 - 响应式原理Vue 的组件对象支持计算属性 computed 和侦听属性 watch，上一篇只是统一的分析了整个响应式的过程，这一篇针对这个两个属性来详细说明一下；文章目录computedwatch区别computed计算属性的初始化是发⽣在 Vue 实例初始化阶段的 initState 函数中，执⾏了 if (opts.computed) initComputed(vm, opts.computed) ，初始化的过程可以参考：Vue2.x 源码 - 初始化：ini.

上一篇：Vue2.x 源码 - VNode渲染过程（update、patch）Vue2.x 实现响应式的核心是利用的 ES5 的 Object.defineProperty ，这也是 Vue 不兼容 IE8 及其以下浏览器的原因；文章目录响应式对象响应式对象Object.defineProperty 的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性，并返回该对象；Object.defineProperty(obj, prop, descriptor)obj ：需要定义.

上一篇：Vue2.x 源码 - render 函数生成 VNodeVue 的渲染过程：上一篇写了 render 函数生成 VNode 的过程，拿到 VNode 这一篇就来看看 VNode 是怎么渲染成真实 DOM 的；

上一篇：Vue2.x 源码 - 编译过程（compile）Vue 的渲染过程：上一篇看了一下编译，编译之后返回了 render 函数，那么 render 又是如何生成 vnode 的呢？本文来看一下。在 Vue 官方文档中介绍 render 函数 的第一个参数是 createElement 用来创建 VNode;<div id="app"> {{ message }} </div>用 render 函数表示：render:function(createElem.

上一篇：Vue2.x 源码 - 初始化：全局APIVue 的渲染过程：这一篇我们来看一下 Vue 是如何解析（compile）模板（template）为render函数。文章目录1、编译入口2、parse3、optimize4、generate1、编译入口注意：这个源码引用关系有点绕，可以先找到 compileToFunctions 方法（最后面），然后往回看。当我们使⽤ Runtime + Compiler 的 Vue.js，它的⼊⼝是 src/platforms/web/entry-r.

上一篇：Vue2.x 源码 - 初始化：stateMixin(Vue)、eventsMixin(Vue)、lifecycleMixin(Vue)、renderMixin(Vue)Vue 中是通过 $mount 实例方法来挂载 vm 的；然而这个方法在很多个文件里都有定义：src/platform/web/entry-runtime-with-compiler.js 、src/platform/web/runtime/index.js 、 src/platform/weex/runtime/index..

上一篇：Vue2.x 源码 - 初始化：initMixin(Vue)这一篇主要看一下 stateMixin、eventsMixin、lifecycleMixin、renderMixin 这四个混入。文章目录一、stateMixin(Vue)二、eventsMixin(Vue)三、lifecycleMixin(Vue)四、renderMixin(Vue)这些主要是往 Vue 实例的原型（prototype）上挂载一些方法：1、stateMixin：数据相关 $data、$props、$set、$.

上一篇：Vue2.x 源码学习准备这篇主要看一下 initMixin 这个混入以及涉及到的 initProxy(vm)、initInjections(vm)、initProvide(vm) 方法；准备工作我们在使用 Vue 时是通过 new Vue（）来进行初始化的，那么这个 Vue 从哪里来的呢？1、在 main.js 引入的 Vue 是在入口文件 src/platforms/web/entry-runtimes.js 里面暴露出来的；2、入口文件里面的 Vue 是从 src/platfo.

虽然说 vue3.x 已经出来很久了，但是大部分人还是习惯使用 vue2.x 进行开发；所以这里我还是想先理顺 vue2.x 的源码。之前也零零散散的看过一些 vue2.x 的源码，但是比较分散，现在正好有个机会，我决定系统的看看 vue2.x 的整个源码，然后整理出来分享学习，同时也作为自己学习的一个总结。这篇文章主要介绍一下学习 vue 源码之前需要做哪些准备！1、个人能力想学习 vue 的源码，首先你需要会使用 vue 这个框架，至少有两个或者以上的项目开发经验，其次需要具备一定的原生

在 VUE + ElementUI 的项目里面，标题内容超出固定宽度超出部分隐藏，鼠标移入显示全部内容。由于项目里面这一类的需求比较多，这里我考虑封装一下，方便使用。组件封装的思路是借助 ElementUI 里面的 tooltip 组件来实现鼠标移入展示全部的效果，然后根据标题的长度来控制 tooltip 组件的显示隐藏。具体实现代码如下：父组件：<textOverflow maxWidth="400px" :content='item.subjectName'></textOve

最近用 Blob 做文件下载的功能，涉及不同后缀的文件，但是每当设置转换的文件类型的时候就很头疼，因为这东西平时也不怎么常见，这里我参考 Blob 配置整理了一份，方便以后使用。拓展名文件类型MIME类型.aacAAC 音频audio/aac.abwAbiWord 文档application/x-abiword.arc存档文档(多个文件嵌入)application/x-freearc.aviAVI: 音频视频交错video/x-msvideo.

需求是：将表格放到项目里面的静态资源文件夹内，然后点击下载，在浏览器上下载这个文件。将文件放到静态资源文件夹下面（vue-cli3.x 放到 public ），这里的文件不会被 webpack 处理，他们最终会被复制到打包目录下面。代码实现downLoad(){ let a = document.createElement('a'); let evt = document.createEvent('MouseEvents'); a.download = '投诉反馈模板'; a.href =

一、vue面试题1、vue的生命周期beforeCreate：实例初始化之后；数据观测和事件配置之前调用，组件的选项对象还没有创建，el挂载和data都没有初始化，无法访问方法和数据。created：实例创建完成之后调用；已经完成了数据观测，属性方法的运算，watch/event 事件回调，data数据初始化已经完成，el挂载还没有开始。beforeMount：挂载之前调用；el初始化已经完成，vdom已经完成data和模板的结合生成html，但是还没有挂载到html页面里。mounted：挂载

vue 项目打包上线之后，每一次都会有浏览器缓存问题，需要手动的清除缓存。这样用户体验非常不好，所以我们在打包部署的时候需要尽量避免浏览器的缓存。下面是我的解决方案：一、修改根目录index.html在 head 里面添加下面代码<meta http-equiv="pragram" content="no-cache"><meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">

预期效果：点击输入框旁边的图标，输入框变为可输入状态；这里控制输入的 editable 字段不是 data 原有的属性，也不是 data 赋值时就存在的字段。问题原因：在 Vue 实例创建时，以及 data 赋值时 editable 并未声明，因此就没有被Vue转换为响应式的属性，自然就不会触发视图的更新。解决方法：1、给 data 赋值前把 editable 属性添加到数组里这里就不贴代码了，大概思路就是：获取到列表信息之后缓存在一个临时数组里（不可以是 data 里面定义好的对象），循环遍历

一、Vue 的 DOM 更新策略Vue 的响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。那么 DOM 更新的策略是什么样的呢？Vue 官网说明：Vue 在更新 DOM 时是 异步执行 的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新

今天遇到一个需要给 for 循环体里面的 form 表单项添加校验的需求，为每一个循环的模块单独添加校验，实现如下：<el-form :model="form" :rules="rules" ref="form" label-width="120px" class="demo-ruleForm"> <el-form-item label="名称" prop="name"> <el-input v-model="form.name" placeh

直接在 package.json 文件同级创建 vue.config.js 文件，具体配置如下：module.exports = { //跟路径 baseUrl：'/', //图标路径设置 pwa: { iconPaths: { favicon32: 'favicon.png', favicon16: 'favicon.png', appleTouchIcon: 'favicon.png', maskIcon: 'favicon.pn

在vue-cli 2.x项目中路由为 history 模式时，打包部署到nginx服务器上后页面刷新空白的问题。我遇到过nginx服务器的根目录和子目录下部署页面刷新空白的情况，在这里做一下记录。一：部署到nginx服务器根目录下找到config/index.js文件的build模块把 assetsPublicPath改为 ‘/’：build:{ index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path

今天运维同学提出一个需求，在访问前端项目的时候，需要添加一个基础路径，用来区别其他的前端项目。案例：http://xxx.com/test/ ,需要前端配置一下 /test/ 作为这个项目的基础路径。具体步骤如下：1、在定义路由的时候，配置一下 base 属性，这个属性默认值是根目录也就是 base:’/’ ，我们需要将根目录替换成 /test/const router = new Router({ mode:'history', base:'/test/', routes})2、在根目录

在前后端交互的时候，有时候需要通过 get 或者 delete 传递一个数组给后台，但是这样直接传递后台无法接收数据，因为在传递的过程中数组参数会被转译，结果如下：参数：{ name : [ 1, 2, 3 ] }转译效果：http://aaa.com?name[]=1&name[]=2&name[]=3目标效果：http://aaa.com?name=1&name=2&name=3解决办法：使用 qs 插件 将数组参数序列化1、qs.stringify({

路由是前端构建单页面应用的关键技术，它的原理核心是：更新视图但不重新请求页面。一、路由安装 install在 src / install.js 文件是 Vue-Router 的安装程序。这里提供了一个 install 方法，使用 Vue.mixin 混入 beforeCreate 和 destroyed 钩子函数，并全局注册 router-view 和 router-link 组件。import View from './components/view'import Link from './com

随着 vue 的脚手架不断更新，搭建项目的时候很多东西都需要我们自己来配置，比如说过滤器 filter。以我个人习惯为例：1、创建一个 filters.js 文件，在这里定义多个过滤器//时间过滤器let formatTime = time => { if (time) { var a = new Date(time).toJSON(); var date = new Date(+new Date(a) + 8 * 3600 * 1000).toISOString().replace

上一次用脚手架从零开始搭建项目已经是两年前的事情了，正好最近有一个新项目启动，我决定重新搭建一个，然后梳理一下流程。操作步骤：1、安装 node：需要在node官网下载一个稳定版本安装一下就可以了。2、安装脚手架：//这里是脚手架3npm install -g @vue/cli3、创建项目：vue create 项目名然后出现下面的选项，现在是选择 vue2 和 vue3 ；这里我选的是 vue2 ,主要考虑是 vue2 比较成熟，方便其他同事参与和维护。安装好之后，依赖包会自动安装

针对前后端完全分离项目，为不同环境配置不同的打包指令是非常必要的。vue-cli2 和 vue-cli3 的配置有所不同，下面分别介绍一下。一、vue-cli2详细步骤：1、安装 cross-env，它可以处理 windows 和其他 Unix 系统在设置环境变量的写法上不一致的问题。npm i --save-dev cross-env 2、配置不同环境下的文件和参数，在 config 目录下创建test.env.js、prod.env.js、dev.env.js 文件（如果已经有了就直接下面操

问题描述：在做菜单权限的时候，使用了 router.addRoutes() 方法把不同权限获取到的路由表动态的添加到路由里面去。菜单正常展示，在点击菜单跳转之后，浏览器刷新一下，页面没有跳转到 404 页面，而是变成了空白。问题原因：addRoutes 和 vuex 一样，在浏览器刷新后数据会丢失，因为刷新页面 Vue 会重新实例化，路由也会恢复到初始路由。解决方案：在页面刷新之后重新获取到通过权限修改后的路由表，然后再次使用 router.addRoutes() 方法将新路由表动态添加到路由里面