11 2020 档案
摘要：在HTML当中，像 <input> , <textarea> , 和 <select> 这类表单元素会维持自身状态，并根据用户输入进行更新。但在React中，可变的状态通常保存在组件的状态属性中，并且只能用 setState() 方法进行更新。 非受控组件 非受控组件，即组件的状态不受React控制
阅读全文
摘要：高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。基本上，这是从React的组成性质派生的一种模式，我们称它们为 “纯”组件， 因为它们可以接受任何动态提供的子组件，但它们不会修改或复制其输入组件的任何行为。 const EnhancedComponent = higherOr
阅读全文
摘要：为了解决跨浏览器兼容性问题，React中的事件处理程序将传递SyntheticEvent实例，该实例是React跨浏览器本机事件的跨浏览器包装器。这些综合事件具有与您惯用的本机事件相同的界面，除了它们在所有浏览器中的工作方式相同。 有点有趣的是，React实际上并未将事件附加到子节点本身。React
阅读全文
摘要：1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。 总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。 前端优化的途径有很多，按粒度大致
阅读全文
摘要：http是HTTP协议运行在TCP之上。所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份。 https是HTTP运行在SSL/TLS之上，SSL/TLS运行在TCP之上。所有传输的内容都经过加密，加密采用对称加密，但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器
阅读全文
摘要：选择器类型 1、ID #id 2、class .class 3、标签 p 4、通用 * 5、属性 [type="text"] 6、伪类 ：hover 7、伪元素 ::first-line 8、子选择器、相邻选择器 三、权重计算规则 1. 第一等：代表内联样式，如: style=””，权值为1000。
阅读全文
摘要：1.父级div定义 height原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。优点：简单、代码少、容易掌握缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题 2，结尾处加空div标签 clear:both 原理：添加一个空div
阅读全文
摘要：JSON相对于XML来讲，数据的体积小，传递的速度更快些 · JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互 · XML对数据描述性比较好； · JSON的速度要远远快于XML
阅读全文
摘要：1xx(临时响应) 100: 请求者应当继续提出请求。 101(切换协议) 请求者已要求服务器切换协议，服务器已确认并准备进行切换。 2xx(成功) 200：正确的请求返回正确的结果 201：表示资源被正确的创建。比如说，我们 POST 用户名、密码正确创建了一个用户就可以返回 201。 202：请
阅读全文
摘要：1.get传参方式是通过地址栏URL传递，是可以直接看到get传递的参数，post传参方式参数URL不可见，get把请求的数据在URL后通过？连接，通过&进行参数分割。psot将参数存放在HTTP的包体内 2.get传递数据是通过URL进行传递，对传递的数据长度是受到URL大小的限制，URL最大长度
阅读全文
摘要：借用构造函数继承，使用call或apply方法，将父对象的构造函数绑定在子对象上 原型继承，将子对象的prototype指向父对象的一个实例 组合继承 原型链继承的缺点 字面量重写原型会中断关系，使用引用类型的原型，并且子类型还无法给超类型传递参数。 借用构造函数（类式继承） 借用构造函数虽然解决了
阅读全文
摘要：浏览器渲染页面的一般过程： 1.浏览器解析html源码，然后创建一个 DOM树。并行请求 css/image/js在DOM树中，每一个HTML标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。DOM树的根节点就是 documentElement，对应的是html标签。 2.浏览器解析
阅读全文
摘要：::after / <br> / clear: both 创建父级 BFC(overflow:hidden) 父级设置高度 BFC （块级格式化上下文），是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
阅读全文
摘要：水平居中 行内元素: text-align: center 块级元素: margin: 0 auto position:absolute +left:50%+ transform:translateX(-50%) display:flex + justify-content: center 垂直居中
阅读全文
摘要：@support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。 calc() 函数用于动态计算长度值。 calc()函数支持 "+", "-", "*", "/" 运算； @media 查询，
阅读全文
摘要：有五种，分别是 State、 Getter、Mutation 、Action、 Modulestate => 基本数据(数据源存放地)getters => 从基本数据派生出来的数据mutations => 提交更改数据的方法，同步！actions => 像一个装饰器，包裹mutations，使之可以
阅读全文
摘要：三种方式第一种：vue异步组件技术 异步加载，vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件。第二种：路由懒加载(使用import)。第三种：webpack提供的require.ensure()，vue-router配置路
阅读全文
摘要：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和**数据对象**data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。载入前/后：在beforeMo
阅读全文
摘要：使用vue开发时，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{{message}}的字样，虽然一般情况下这个时间很短暂，但是我们还是有必要让解决这个问题的。首先：在css里加上[v-cloak] {display: none;}
阅读全文
摘要：用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。url地址显示：query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者
阅读全文
摘要：从浏览器中创建XMLHttpRequests；node.js创建http请求；支持Promise API；拦截请求和响应；转换请求数据和响应数据；取消请求；自动换成json。axios中的发送字段的参数是data跟params两个，两者的区别在于params是跟请求地址一起发送的，data的作为一个
阅读全文
摘要：假如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活。
阅读全文
摘要：使用location.href='/url'来跳转，简单方便，但是刷新了页面；使用history.pushState('/url')，无刷新页面，静态跳转；引进router，然后使用router.push('/url')来跳转，使用了diff算法，实现了按需加载，减少了dom的消耗。其实使用rout
阅读全文
摘要：.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡；.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；.capture：与事件
阅读全文
摘要：相同点：assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片，字体图标，样式文件等都可以放在这两个文件下，这是相同点不相同点：assets中存放的静态资源文件在项目打包时，也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传，所谓打包简单点
阅读全文
摘要：单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。多页面（MPA
阅读全文
摘要：vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法。
阅读全文
摘要：因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。 组建中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而
阅读全文
摘要：当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，你需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。
阅读全文
摘要：computed: 当一个属性受多个属性影响的时候就需要用到computed 最典型的栗子： 购物车商品结算的时候watch: 当一条数据影响多条数据的时候就需要用watch 栗子：搜索数据
阅读全文
摘要：v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：v-bind绑定一个value属性；v-on指令给当前元素绑定input事件。
阅读全文
摘要：vue文件的一个加载器，将template/js/style转换成js模块。用途：js可以写es6、style样式可以scss或less、template可以加jade等
阅读全文
摘要：共同点：都能控制元素的显示和隐藏；不同点：实现本质方法不同，v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译一次；v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。而且v-if不停的销毁和创建比较消耗性能。总结：如果要频繁切
阅读全文
摘要：答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；双向数据绑定：保留了angular的特点，在数据操作方面更为简单；组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；
阅读全文
摘要：forEach更多的用来遍历数组for in 一般常用来遍历对象或jsonfor of数组对象都可以遍历，遍历对象需要通过和Object.keys()for in循环出的是key，for of循环出的是value
阅读全文
摘要：async await 是用来解决异步的，async函数是Generator函数的语法糖使用关键字async来表示，在函数内部使用 await 来表示异步async函数返回一个 Promise 对象，可以使用then方法添加回调函数当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再
阅读全文
摘要：let arr = [12,43,23,43,68,12]; let item = [...new Set(arr)]; console.log(item);//[12, 43, 23, 68]
阅读全文
摘要：reject 是用来抛出异常，catch 是用来处理异常reject 是 Promise 的方法，而 catch 是 Promise 实例的方法reject后的东西，一定会进入then中的第二个回调，如果then中没有写第二个回调，则进入catch网络异常（比如断网），会直接进入catch而不会进入
阅读全文
摘要：三个状态：pending、fulfilled、reject两个过程：padding -> fulfilled、padding -> rejected当pending为rejectd时，会进入catch
阅读全文
摘要：事件循环中分为宏任务队列和微任务队列其中setTimeout的回调函数放到宏任务队列里，等到执行栈清空以后执行promise.then里的回调函数会放到相应宏任务的微任务队列里，等宏任务里面的同步代码执行完再执行async函数表示函数里面可能会有异步方法，await后面跟一个表达式async方法执行
阅读全文
摘要：应用场景Set用于数据重组，Map用于数据储存Set： （1）成员不能重复（2）只有键值没有键名，类似数组（3）可以遍历，方法有add, delete,hasMap:（1）本质上是健值对的集合，类似集合（2）可以遍历，可以跟各种数据格式转换
阅读全文
摘要：（1）用了箭头函数，this就不是指向window，而是父级（指向是可变的）（2）不能够使用arguments对象（3）不能用作构造函数，这就是说不能够使用new命令，否则会抛出一个错误（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数
阅读全文
摘要：var声明变量可以重复声明，而let不可以重复声明var是不受限于块级的，而let是受限于块级var会与window相映射（会挂一个属性），而let不与window相映射var可以在声明的上面访问变量，而let有暂存死区，在声明的上面访问变量会报错const声明之后必须赋值，否则会报错const定义
阅读全文
摘要：ECMAScript5，即ES5，是ECMAScript的第五次修订，于2009年完成标准化ECMAScript6，即ES6，是ECMAScript的第六次修订，于2015年完成，也称ES2015ES6是继ES5之后的一次改进，相对于ES5更加简洁，提高了开发效率ES6新增的一些特性：1）let声明
阅读全文
