kleinBlue.的博客

分享至qq空间，新浪微博，微信朋友圈及微信好友本博客主要针对pc网页版分享，移动端相似之处不做参考关于分享，对于分享到qq空间、好友及新浪微博比较简单，给一个点击事件调用一下官方接口就可以了，自己绑定一些标题、链接、图片内容就可以了分享到qq空间及好友qq空间：https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=你的网址&sharesource=qzone&title=你的分享标题&pics=

一、错误类型任何一个框架，对于错误的处理都是一种必备的能力在Vue中，则是定义了一套对应的错误处理规则给到使用者，且在源代码级别，对部分必要的过程做了一定的错误处理。主要的错误来源包括： 后端接口错误 代码中本身逻辑错误 二、如何处理后端接口错误通过axios的interceptor实现网络请求的response先进行一层拦截apiClient.interceptors.response.use(response=>{return...

一、从历史说起Web是World Wide Web的简称，中文译为万维网我们可以将它规划成如下的几个时代来进行理解 石器时代 文明时代 工业革命时代 百花齐放时代 石器时代石器时代指的就是我们的静态网页，可以欣赏一下1997的Apple官网最早的网页是没有数据库的，可以理解成就是一张可以在网络上浏览的报纸，直到CGI技术的出现通过 CGI Perl 运行一小段代码与数据库或文件系统进行交互，如当时的Google（1998年）文明时代..

一、什么是SPASPA（single-page application），翻译过来就是单页应用SPA是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验在单页应用中，所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面页面在任何时间点都不会重新加载，也不会将控制转移到其他页面举个例子来讲就是一个杯子，早上装的牛奶，中午装的是开水，晚上..

一、什么是双向绑定我们先从单向绑定切入单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定举个栗子当用户填写表单时，View的状态就被更新了，如果此时可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定关系图如下二、双向绑定的原理是什么我们都知道Vue...

一、生命周期是什么生命周期（Life Cycle）的概念应用很广泛，特别是在政治、经济、环境、技术、社会等诸多领域经常出现，其基本涵义可以通俗地理解为“从摇篮到坟墓”（Cradle-to-Grave）的整个过程在Vue中实例从创建到销毁的过程就是生命周期，即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程我们可以把组件比喻成工厂里面的一条流水线，每个工人（生命周期）站在各自的岗位，当任务流转到工人身边的时候，工人就开始工作PS：在Vue生命周期钩子会自动绑定..

一、组件间通信的概念开始之前，我们把组件间通信这个词进行拆分 组件 通信 都知道组件是vue最强大的功能之一，vue中每一个.vue我们都可以视之为一个组件通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的。广义上，任何信息的交通都是通信组件间通信即指组件(.vue)通过某种方式来传递信息以达到某个目的举个栗子我们在使用UI框架中的table组件，可能会往table组件中传入某些数据，这个本质就形成了组件之间的通信二、组件间通信解决了什么..

一、v-show与v-if的共同点我们都知道在vue中v-show与v-if的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示在用法上也是相同的<Modelv-show="isShow"/><Modelv-if="isShow"/> 当表达式为true的时候，都会占据页面的位置 当表达式都为false时，都不会占据页面位置 二、v-show与v-if的区别 控制手段不同 编译过程不同 ...

一、作用v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回true值的时候被渲染v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组或者对象，而item则是被迭代的数组元素的别名在v-for的时候，建议设置key值，并且保证每个key值是独一无二的，这便于diff算法进行优化两者在用法上<Modalv-if="isShow"/><li...

一、什么是首屏加载首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容首屏加载可以说是用户体验中最重要的环节关于计算首屏时间利用performance.timing提供的数据：通过DOMContentLoad或者performance来计算出首屏时间//方案一：document.addEventListener('DOMContentLoad...

一、组件是什么回顾一下对组件的定义：组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在Vue中每一个.vue文件都可以视为一个组件组件的优势 降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现 调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，..

一、实例和组件定义data的区别vue实例的时候定义data属性既可以是一个对象，也可以是一个函数constapp=newVue({el:"#app",//对象格式data:{foo:"foo"},//函数格式data(){return{foo:"foo"}}})组件中定义data属性，只能是一个函数如果为组件data...

一、直接添加属性的问题我们从一个例子开始定义一个p标签，通过v-for指令进行遍历然后给botton标签绑定点击事件，我们预期点击按钮时，数据新增一个属性，界面也新增一行<pv-for="(value,key)initem":key="key">{{value}}</p><button@click="addProperty">动态添加新属性</button>实例化一个vue实例，定义data属性和meth...

一、思考我们都听过知其然知其所以然这句话那么不知道大家是否思考过new Vue()这个过程中究竟做了些什么？过程中是如何完成数据的绑定，又是如何将数据渲染到视图的等等一、分析首先找到vue的构造函数源码位置：src\core\instance\index.jsfunctionVue(options){if(process.env.NODE_ENV!=='production'&&!(thisinstanceofVue)...

一、NextTick是什么官方对其的定义在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM什么意思呢？我们可以理解成，Vue在更新DOM时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新举例一下Html结构<divid="app">{{message}}</div>构建一个vue实例constvm=ne...

一、mixin是什么Mixin是面向对象程序设计语言中的类，提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类Mixin类通常作为功能模块使用，在需要该功能时“混入”，有利于代码复用又避免了多继承的复杂Vue中的mixin先来看一下官方定义mixin（混入），提供了一种非常灵活的方式，来分发Vue组件中的可复用功能。本质其实就是一个js对象，它可以包含我们组件中任意功能选项，如data、components、methods、created、computed...

一、slot是什么在HTML中slot元素 ，作为Web Components技术套件的一部分，是Web组件内的一个占位符该占位符可以在后期使用自己的标记语言填充举个栗子<templateid="element-details-template"><slotname="element-name">Slottemplate</slot></template><element-details><...

一、Observable 是什么Observable翻译过来我们可以理解成可观察的我们先来看一下其在Vue中的定义Vue.observable，让一个对象变成响应式数据。Vue内部会用它来处理data函数返回的对象返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器Vue.observable({count:1})其作用等同于newvue({count:1})在Vue 2.x...

一、Key是什么开始之前，我们先还原两个实际工作场景 当我们在使用v-for时，需要给单元加上key <ul><liv-for="iteminitems":key="item.id">...</li></ul> 用+new Date()生成的时间戳作为key，手动强制触发重新渲染 <Comp:key="+newDate()"/>那么这背后的逻辑是什么，key的作用又是什么？一句话...

一、Keep-alive 是什么keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOMkeep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们keep-alive可以设置以下props属性： include- 字符串或正则表达式。只有名称匹配的组件会被缓存 exclude- 字符串或正则表达式。任何名称匹配的组件都不会被缓存 max- 数字。最多可以缓存多少组件实例 关于keep-alive的...

一、修饰符是什么在程序世界里，修饰符是用于限定类型以及类型成员的声明的一种符号在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理vue中修饰符分为以下五种： 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符 二、修饰符的作用表单修饰符在我们填写表单的时候用得最多的是input标签，指令用得最多的是v-model关于表单的修饰符有如..

一、什么是指令开始之前我们先学习一下指令系统这个词指令系统是计算机硬件的语言系统，也叫机器语言，它是系统程序员看到的计算机的主要属性。因此指令系统表征了计算机的基本功能决定了机器所要求的能力在vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能除了核心功能默认内置的指令 (v-model和v-show)，Vue也允许注册自定义指令指令使用的几种方式：//会实例化一个指令，但这个...

一、是什么过滤器（filter）是输送介质管道上不可缺少的一种装置大白话，就是把一些不必要的东西过滤掉过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，我们也可以理解其为一个纯函数Vue允许你自定义过滤器，可被用于一些常见的文本格式化ps:Vue3中已废弃filter二、如何用vue中的过滤器可以用在两个地方：双花括号插值和v-bind表达式，过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示：<!--...

一、什么是虚拟DOM虚拟 DOM （Virtual DOM）这个概念相信大家都不陌生，从React到Vue，虚拟DOM为这两个框架都带来了跨平台的能力（React-Native和Weex）实际上它只是一层对真实DOM的抽象，以JavaScript对象 (VNode节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上在Javascript对象中，虚拟DOM表现为一个Object对象。并且最少包含标签名 (tag)、属性 (att...

一、是什么diff算法是一种通过同层的树节点进行比较的高效算法其有两个特点： 比较只会在同层级进行, 不会跨层级比较 在diff比较的过程中，循环从两边向中间比较 diff算法的在很多场景下都有应用，在vue中，作用于虚拟dom渲染成真实dom的新旧VNode节点比较二、比较方式diff整体策略为：深度优先，同层比较 比较只会在同层级进行, 不会跨层级比较 比较的过程中，循环从两边向中间收拢 下面举个vue通过diff算法...

一、axios是什么axios是一个轻量的HTTP客户端基于XMLHttpRequest服务来执行HTTP请求，支持丰富的配置，支持Promise，支持浏览器端和Node.js端。自Vue2.0起，尤大宣布取消对vue-resource的官方推荐，转而推荐axios。现在axios已经成为大部分Vue开发者的首选特性 从浏览器中创建XMLHttpRequests 从node.js创建http请求 支持PromiseAPI...

一、axios的使用关于axios的基本使用，上篇文章已经有所涉及，这里再稍微回顾下：发送请求importaxiosfrom'axios';axios(config)//直接传入配置axios(url[,config])//传入url和配置axios[method](url[,option])//直接调用请求方式方法，传入url和配置axios[method](url[,data[,option]])//直接调用请求方式方法，传入data、url和配...

一、是什么Server-Side Rendering我们称其为SSR，意为服务端渲染指由服务侧完成页面的HTML结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程先来看看Web3个阶段的发展史： 传统服务端渲染SSR 单页面应用SPA 服务端渲染SSR 传统web开发网页内容在服务端渲染完成，⼀次性传输到浏览器img打开页面查看源码，浏览器拿到的是全部的dom结构单页应用SPA单页应用优秀的用户体...

一、为什么要划分使用vue构建项目，项目结构清晰会提高开发效率，熟悉项目的各种配置同样会让开发效率更高在划分项目结构的时候，需要遵循一些基本的原则： 文件夹和文件夹内部文件的语义一致性 单一入口/出口 就近原则，紧耦合的文件应该放到一起，且应以相对路径引用 公共的文件应该以绝对路径的方式从根目录引用 /src外的文件不应该被引入 文件夹和文件夹内部文件的语义一致性我们的目录结构都会有一个文件夹是按照路由模块来划分的，如pages文件夹，这个...

一、是什么权限是对特定资源的访问许可，所谓权限控制，也就是确保用户只能访问到被分配的资源而前端权限归根结底是请求的发起权，请求的发起可能有下面两种形式触发 页面加载触发 页面上的按钮点击触发 总的来说，所有的请求发起都触发自前端路由或视图所以我们可以从这两方面入手，对触发权限的源头进行控制，最终要实现的目标是： 路由方面，用户登录后只能看到自己有权访问的导航菜单，也只能访问自己有权访问的路由地址，否则将跳转4xx提示页 视图方面，用户只能看到自己有权浏...

一、跨域是什么跨域本质是浏览器基于同源策略的一种安全手段同源策略（Sameoriginpolicy），是一种约定，它是浏览器最核心也最基本的安全功能所谓同源（即指在同一个域）具有以下三个相同点 协议相同（protocol） 主机相同（host） 端口相同（port） 反之非同源请求，也就是协议、端口、主机其中一项不相同的时候，这时候就会产生跨域一定要注意跨域是浏览器的限制，你用抓包工具抓取接口数据，是可以看到接口已经把数据返回回来了，只是浏览器的限制，你获..

一、如何部署前后端分离开发模式下，前后端是独立布署的，前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可我们知道vue项目在构建后，是生成一系列的静态文件常规布署我们只需要将这个目录上传至目标服务器即可//scp上传user为主机登录用户，host为主机外网ip,xx为web容器静态资源路径scpdist.zipuser@host:/xx/xx/xx让web容器跑起来，以nginx为例server{listen80;...

一、错误类型任何一个框架，对于错误的处理都是一种必备的能力在Vue中，则是定义了一套对应的错误处理规则给到使用者，且在源代码级别，对部分必要的过程做了一定的错误处理。主要的错误来源包括： 后端接口错误 代码中本身逻辑错误 二、如何处理后端接口错误通过axios的interceptor实现网络请求的response先进行一层拦截apiClient.interceptors.response.use(response=>{return...

一、Vue3介绍关于vue3的重构背景，看看尤大怎么说：「Vue 新版本的理念成型于 2018 年末，当时 Vue 2 的代码库已经有两岁半了。比起通用软件的生命周期来这好像也没那么久，但在这段时期，前端世界已经今昔非比了在我们更新（和重写）Vue 的主要版本时，主要考虑两点因素：首先是新的 JavaScript 语言特性在主流浏览器中的受支持水平；其次是当前代码库中随时间推移而逐渐暴露出来的一些设计和架构问题」简要就是： 利用新的语言特性(es6) 解决架构问题 哪..