前端知识（笔记）

目录

1，vue中的data为什么是一个函数？

2，去重

3.get与post请求有什么区别

4.cookie，localStorage, sessionStorage的区别？

5.项目性能优化方案

1，vue中的data为什么是一个函数？

vue中的data必须是一个函数，因为是函数时，组件实例化时这个函数将会呗调佣，返回一个对象，计算机会给这个对象分配一个内存地址，实例化几次就分配几个内存地址，他们的地址不一样，所以每个组件中的数据不会互相干扰，改变其中一个组件的状态，其他组件不变。

简单来说，就是为了保证组件的独立性和可复用性，如果data是个函数的话，每次复用一次组件就会返回新的data，类似于给每个组件实例创建一个私有的数据空间，保护各自的数据互不影响

2，去重

indexof()； set()--es6可以搭配扩展运算符 。。。；双重for循环

3.v-model原理？

采用是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调从而达到数据和视图同步。

3.get与post请求有什么区别

get是从服务器获取数据，post是向服务器传送数据。

post比get安全，因为数据在地址栏不可见。

get提交数据最多只能1024字节，post没有限制。

get使用url或cookie传参，post将数据放在request BODY中。

4.cookie，localStorage, sessionStorage的区别？

共同点：都是保存在浏览器端，且同源的

不同：

cookie数据始终在同源的http请求中携带，cookie在浏览器和服务器件来回传递，cookie数据还有路径path的概念，可以限制cookie只属于某个路径下sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。

存储大小限制不同：

cookie数据不能超过4k，sessionStroage和localStorage可以达到5M.。

sessionStorage：仅在当前浏览器窗口关闭之前有效。

localStorage：始终有效，窗口或浏览器关闭也一直保存，本地储存，因此用作持久数据。

cookie：只在设置的cookie过期时间之前有效，即使窗口或浏览器关闭。

作用域不同：

sessionStorage：不在不同的浏览器窗口中共享，即使是同一个页面；

localStorage：在所有同源窗口都是共享的，也就是说只要浏览器不关闭，数据仍然存在。

cookie：也是在所有同源窗口中都是共享的，也就是只要浏览器不关闭，数据仍然存在。

5.项目性能优化方案

减少http请求

减少DNS查询

使用CDN

避免重定向

图片懒加载

路由懒加载

减少DOM元素操作

使用外部js和css

压缩js，css，字体，图片等

避免图片的src为空

把js放在页面的底部