复习
关注
分享
扫一扫
文章平均质量分 92
时清云
自强不息，厚德载物；日拱一卒，功不唐捐；海纳百川，有容乃大。这世上没有最强的人，只有想变强的人，做一个简单真实的自己。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Vue源码解析，keep-alive是如何实现缓存的？
前言在性能优化上，最常见的手段就是缓存。对需要经常访问的资源进行缓存，减少请求或者是初始化的过程，从而降低时间或内存的消耗。Vue 为我们提供了缓存组件 keep-alive，它可用于路由级别或组件级别的缓存。但其中的缓存原理你是否了解，组件缓存渲染又是如何工作。那么本文就来解析 keep-alive 的原理。LRU策略在使用 keep-alive 时，可以添加 prop 属性 include、exclude、max 允许组件有条件的缓存。既然有限制条件，旧的组件需要删除缓存，新的组件就需要加入到最转载 2020-08-31 22:55:19 · 978 阅读 · 0 评论 -
JavaScript中的reduce()的理解和示例说明
reduce()方法对数组中的每一个元素执行一个reducer函数(由你提供)，从而得到一个单一的输出值。reduce() 方法将一个数组中的所有元素还原成一个单一的输出值，输出值可以是数字、对象或字符串。reduce() 方法有两个参数，第一个是回调函数，第二个是初始值。回调函数回调函数在数组的每个元素上执行。回调函数的返回值是累加结果，并作为下一次调用回调函数的参数提供。回调函数带有四个参数。Accumulator（累加器）——累加器累加回调函数的返回值。Current Value（当前值）转载 2020-07-19 20:06:27 · 802 阅读 · 0 评论 -
vue中的.native修饰符
一般来说，vue本身提供了v-on:eventName这个语法来提供vue的时事件绑定，通常使用@eventName这个语法糖代替上述语法。使用过程中没有考虑@eventName作用标签的类型，因为一般将该语法用在html原生标签，在组件标签上使用的时候，就要加上native修饰符，这样就可以像原生标签一样使用了。native在Vue.js官方的大致意思是监听自定义标签根标签的事件，我的理解是一般都是原生的html标签加上处理事件，但如果给组件标签加上事件的话，相当于给组件的根元素（也就是原生的htm原创 2020-07-12 17:41:37 · 8463 阅读 · 3 评论 -
vue源码分析之reduce()的思考
vue中如果data中的数据嵌套层数较多的情况下，例如：//html<p>{{items.item.a}}</p><p>{{items.item.b.c}}</p>// jsdata(){ items:{ item:{ a:1 b:{ c:2 } } }}那vue中是怎么解析items.item.a和items.item.b.c这样数据的呢？在co原创 2020-07-12 12:16:22 · 2088 阅读 · 0 评论 -
vue源码分析之createDocumentFragment()的思考
先看一下关于createDocumentFragment的定义：createDocumentFragment()方法，是用来创建一个虚拟的节点对象，或者说，是用来创建文档碎片节点。它可以包含各种类型的节点，在创建之初是空的。DocumentFragment节点不属于文档树，继承的parentNode属性总是null。它有一个很实用的特点，当请求把一个DocumentFragment节点插入文档树时，插入的不是DocumentFragment自身，而是它的所有子孙节点，即插入的是括号里的节点。这个特性使转载 2020-07-11 06:11:33 · 1720 阅读 · 0 评论 -
浏览器通过file://访问文件和localhost://访问文件的区别
1、file://file协议用于访问本地计算机中的文件，好比通过资源管理器中打开文件一样，需要主要的是它是针对本地的，即file协议是访问你本机的文件资源。2、localhost://localhost://即本地的http://http访问本地的html文件，相当于将本机作为了一台http服务器，然后通过localhost访问的是你自己电脑上的本地服务器，再通过http服务器去访问你本机的文件资源。再简单点就是file只是简单请求了本地文件，将其作为一个服务器未解析的静态文件打开。而http是转载 2020-07-07 16:36:11 · 49993 阅读 · 1 评论 -
vue中v-if与v-show的区别以及使用场景
区别1.手段：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；2.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；3.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为转载 2020-07-05 22:27:24 · 493 阅读 · 1 评论 -
Vue实例为什么只能有一个根元素？
我们在初学Vue时，第一个上手的例子基本都是 new Vue({el:’#app’})，但是为什么Vue实例只能挂载在一个div上呢？同样的当我们开始写第一个Vue页面的时候，我们试图在template标签下写两个div，Vue提醒我们只能写一个元素，但是为什么只能有一个元素呢？很多时候我们都已经习以为常，但是却说不上来为什么。笔者入坑Vue也有一段时间了，对Vue也算了解，Vuex、Vue-Router也用了不少；但是前几天一看到这个面试问题却感觉一下子回答不上了，想来每次写代码也都是拿来就用，也没有仔转载 2020-07-05 22:16:06 · 2039 阅读 · 0 评论 -
innerHTML和outerHTML的区别
为什么要总结innerHTML和outerHTML的区别呢，主要是在看vue.js官方文档时，看到生命周期时)]原生的方法有点忘了，所以要重拾起来。示例如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2020-07-05 21:34:55 · 1914 阅读 · 0 评论 -
安装vue-devtools那些事儿
本文主要介绍 vue的调试工具 vue-devtools 的安装和使用工欲善其事, 必先利其器, 快来用vue-devtools来调试开发你的vue项目吧安装:1.到github下载：git clone https://github.com/vuejs/vue-devtools2.在vue-devtools目录下安装依赖包cd vue-devtoolsnpm install// 如果网速不好，可以用cnpm install 来代替// 淘宝镜像安装 npm config set regi原创 2020-07-04 23:27:02 · 233 阅读 · 0 评论 -
webpack 开发环境 process.env.NODE_ENV
（一）.概述在工作中，根据开发环境不同，设置不同的变量、参数、和引入依赖，使打包更加的自动化，一劳永逸借助于 process.env.NODE_ENV 可以使我们区分开发环境查看环境变量1.安装nodejs2.通过终端（cmd），输入node，进入编辑模式3.输入process+回车, 显示进程4.输入process.env+回车，显示 当前环境（environment）5.输入process.env.NODE_ENV+回车，显示’undefined’说明 process.env.NODE转载 2020-06-30 07:36:39 · 1431 阅读 · 0 评论 -
process.env.NODE_ENV设置生产环境模式
最近系统接入了公司的单点登录，为了登陆成功后再跳回系统的主页面，又申请了测试和沙箱的域名（之前都是直接用IP登的），本地开发是配置的host。接入之后发现了一个非常麻烦的点就是给单点登录传的跳转地址每次都要修改，开发的时候要写成开发的域名，测试的时候要改成测试的域名，进沙箱的时候要改成跳转沙箱的域名，上线的时候又要改成线上的域名。特别是在测试阶段，开发测试来回切换，不胜其烦。于是就想把它写成配置文件，根据不同环境加载不同的配置，这样就不用来回改了。这个时候，process.env就跳入了脑海。扒一扒pr转载 2020-06-30 07:11:37 · 30205 阅读 · 5 评论 -
vue中的事件修饰符.self、.capture和.passive
vue中的事件修饰符有6种：.stop.prevent.capture.once.self.passive.stop是stopPropagation停止冒泡，.prevent是preventDefault阻止默认事件，.once是点击事件将只会触发一次<!-- 点击事件将只会触发一次 --><a v-on:click.once="doThis"></a>1、.self只在目标Dom是绑定了动作的Dom才触发也就是说只有这个Dom绑定了这个原创 2020-06-29 13:19:16 · 4430 阅读 · 0 评论 -
深入理解.sync修饰符
v-on="{a: f()}"等价于v-on:a=“f()”为什么会有.sync这样的修饰符呢？在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。一个组件上只能定义一个v-model，如果其他prop也要实现双向绑定的效果该怎么办呢？ 简单的方法是子组件向父组件发送一个事件，父组件监听该事件，然后更新prop。具体如下：...原创 2020-06-27 10:43:05 · 2536 阅读 · 0 评论 -
mac上安装vue-cli时报错
mac上安装vue-cli时报Error: EACCES: permission denied, access ‘/usr/local/lib/node_modules’原因: 执行命令行命令时没有获得管理员权限解决方案：在命令行前面添加sudo获取管理员权限，输入管理员密码就行例如原来的是: npm install -g vue-cli应该该为：sudo npm install -g vue-cli 再输入密码就行注意红色的长方形中圈出的报错信息，主要是没有相关的权限，一定要找准问题原创 2020-06-26 23:21:54 · 880 阅读 · 1 评论 -
Vue-- $attrs与$listeners的详解
1、vm.$attrs2.4.0新增类型 { [key: string]: string }只读详细包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。简单点讲就是包含了所有父组件在子组件上设置的属性（除了prop传递的属性、class 和 styl转载 2020-06-26 18:05:12 · 3927 阅读 · 0 评论 -
vue组件中data为什么是一个函数？
vue2.X组件中data为什么是一个函数？曾经的困惑，今天我就好好总结一下。在vue实例上data定义的是一个对象：new Vue({ el: '#blog-post-demo', data: { posts: [ { id: 1, title: 'My journey with Vue' }, { id: 2, title: 'Blogging with Vue' }, { id: 3, title: 'Why Vue is so fun' }原创 2020-06-24 08:50:15 · 1764 阅读 · 0 评论 -
为什么客户端发出第四次挥手的确认报文后要等2MSL的时间才能释放TCP连接？
先看一下什么是2MSLMSL是Maximum Segment Lifetime英文的缩写，中文可以译为“报文最大生存时间”，他是任何报文在网络上存在的最长时间，超过这个时间报文将被丢弃。因为tcp报文（segment）是ip数据报（datagram）的数据部分，具体称谓请参见《数据在网络各层中的称呼》一文，而ip头中有一个TTL域，TTL是time to live的缩写，中文可以译为“生存时间”，这个生存时间是由源主机设置初始值但不是存的具体时间，而是存储了一个ip数据报可以经过的最大路由数，每经过一个处转载 2020-06-19 12:41:38 · 1201 阅读 · 0 评论