2020年06月_reaaal

原创浏览器输入网址到页面成功加载后都做了哪些工作？

用户在输入栏输入网址后，浏览器会先查找本地缓存中是否有该资源，有的话会直接返回给浏览器。若本地缓存没有资源，浏览器会发起url请求，首先会进行的DNS解析以获取请求域名的服务器ip地址。如果请求是https，那么还需要建立TLS连接。。其中，DNS也有几步缓存“浏览器缓存，hosts文件。如果本地域名解析服务器没有该域名的记录，则开始递归+迭代解析。TCP三次握手，HTTP、TLS握手、HTTPS接下来就是利用IP地址和服务器建立TCP连接。连接建立之后，浏览器端会构建请求行、请求头等..

2020-06-28 11:37:13 351

原创 Vue不同单页面之间传值/兄弟组件传值

eventBus对于非父子组件的传值，如果不是项目很大很复杂，使用eventBus方法来实现传值。这种方法通过一个空的Vue实例作为中央事件中心，用他来触发事件和监听事件。具体步骤如下：新建一个Vue实例。比如新建一个Bus文件夹。下面是index.js。在需要进行传值的页面读引入这个Bus文件夹。import Vue from 'vue'export default new Vue在需要传值的页面（组件）内通过$emit来触发一个自定义事件。Bus.$emit("getCourse"

2020-06-17 15:43:02 2859

原创为什么vue组件中的data是函数类型？

因为vue组件是可复用的。一个组件被创建好之后就有可能在各个地方被引用。而不管组件被复用了多少次，组件中的data数据都应该是相互隔离、互不影响的。如果不用函数，用的是对象形式，那么每个组件的data都是内存在同一个地址当中，如果其中一个数据改变了其他的也会跟着改变。只有在函数作用域中，每个data里面的数据都会拥有自己的作用域，每个实例也就是相互独立的，不会相互影响。...

2020-06-16 10:37:33 452

原创 Vue-router的两种模式

hash中所周知，vue-router存在两种模式，hash模式和history模式。那么两者的区别主要在哪里呢？hash模式的工作原理是hashchange事件，可以在window监听hash的变化。我们在url后面随便添加一个#xx触发这个事件。window.onhashchange = function(event){ console.log(event.oldURL,event.newURL); let hash = location.hash.slice(1); do

2020-06-16 10:16:30 656

原创关系型数据库与非关系型数据库之间的区别

关系型数据库关系型数据库指采用了关系模型来组织数据的数据库。关系模型指的就是二维表。一个关系型数据库就是由二维表及其之间的联系所组成的一个数据组织。优点：易于维护：都是使用表结构，格式一致；使用方便：sql语言通用，可用于复杂查询；复杂操作：支持sql，可用于一个表以及多个表之间非常复杂的查询。缺点：读写性能较差，尤其是海量数据的高效率读写；固定的表结构，灵活度稍欠；高并发读写需求，传统关系型数据库来说，硬盘I/O是一个很大的瓶颈。非关系型数据库非关系型数据库指非关系型的，分布

2020-06-15 10:53:00 379

转载 jQuery和vue的区别

jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、时间绑定等操作，其实和原生的HTML的区别只在于更加方便的选取和操作DOM对象，而数据和界面还是在一起的。Vue则是通过Vue对象将数据和view完全分离了。对数据进行操作不再需要引用响应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。Vue的适用场景：复杂数据操作的后台页面，表单填写页面jQuery适用的场景：一些html5的动画页面，一些需要js来操作页面样式的页面。.

2020-06-13 15:27:31 439

原创 JS的继承方式

原型链继承特点：子类既可以继承父类实例上的属性和方法，也可以继承父类原型上的属性和方法。缺点：无法实现多继承继承自原型对象的属性和方法是所有子类共享的 // 原型继承 function Animal(name) { this.name = name; // 实例方法 this.sleep = function () { console.log(this.nam

2020-06-09 15:13:23 110

转载对JS原型机原型链的理解

原型的规则js中，每个对象都有一个隐式属性_proto_。js中，每个函数都有一个prototype属性，prototype属性是一个指针，指向一个对象。所有的引用类型的proto属性值都指向构造函数的prototype属性值。构造函数使用构造函数创建对象 var person1 = new Person(); person1.name = '张三' cosnoel.log(person1.name) //张三Person就是一个构造函数，通

2020-06-09 10:20:51 111

原创对call、apply和bind的理解及他们的区别

说明每个函数都包含两个非继承而来的方法，call()和apply()，其作用都是用来改变函数的执行环境。call/apply/bind方法的来源call、apply和bind方法其实都是继承自function.prototype中，属于实例方法。 console.log(Function.prototype.hasOwnProperty('call')); console.log(Function.prototype.hasOwnProperty('apply'));

2020-06-08 16:04:38 562

原创 Vue数据双向绑定的原理

Vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方法，通过**Object.defineProperty()**来劫持各个属性的setter和getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通JavaScript对象传给vue实例来作为他的data选项时，vue将遍历它的属性，用Object.defineProperty()将它们转为getter和setter。用户看不到getter和setter，但是在内部它们让Vue追踪依赖，在属性被访问和修改时通知变化。.

2020-06-04 17:38:57 130

reaaal的博客