localstory，sessionstory，vuex，cook

函数式组件

1.特点

• 没有this（没有实例）
• 没有响应式数据
• 它只是一个接受一些 prop 的函数。
• render

 

MVVM分为Model、View、ViewModel三者。

• Model：代表数据模型，数据和业务逻辑都在Model层中定义；
• View：代表UI视图，负责数据的展示；
• ViewModel：就是与界面(view)对应的Model。因为，数据库结构往往是不能直接跟界面控件一一对应上的，所以，需要再定义一个数据对象专门对应view上的控件。而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象。

前段时间面试蚂蚁金服，面试官问我，比如UI中有一个li列表，它是怎么与我们的数据对应的，当时没明白他在问什么，现在想想应该是考察ViewModel。

Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。

简单的说，ViewModel就是View与Model的连接器，View与Model通过ViewModel实现双向绑定。

浏览器渲染的原理：

1.根据html文件构建DOM树和CSSOM树。构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕，再继续构建DOM树及CSSOM树。

2.构建渲染树（Render Tree）。

3.页面的重绘（repaint）与重排（reflow，也有称回流）。页面渲染完成后，若JS操作了DOM节点，根据JS对DOM操作动作的大小，浏览器对页面进行重绘或是重排。

判断数组为数组：

var arr = [1,2,3,1];

console.log(arr instanceof   Array); // true

var arr = [1,2,3,1];

console.log(arr.constructor === Array); // true

get传递数组：

在请求拦截器中将参数序列化配置，

设置一下

axios.get("https://www.cnblogs.com/enter",{
params: {
     keys：this.tag
},
paramsSerializer: function(params) {
          const keys= params.keys.map(_=>`keys=${_}`).join('&');
          return `${keys}` ;
}
}).then((res)=>{
        //成功后的处理
});

 

undefined表示变量声明但未初始化时的值，

null值表示一个空对象指针。typeof==》object

cookie：

区别：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器
和服务器间来回传递。

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

一，localstory，sessionstory类似，

• 两者的共同点在于：
  • 存储大小均为5M左右
  • 都有同源策略限制
  • 仅在客户端中保存，不参与和服务器的通信
• 两者的不同点在于：
  • 生命周期 —— 数据可以存储多少时间
    • localStorage: 存储的数据是永久性的，除非用户人为删除否则会一直存在。
    • sessionStorage: 与存储数据的脚本所在的标签页的有效期是相同的。一旦窗口或者标签页被关闭，那么所有通过 sessionStorage 存储的数据也会被删除。
  • 作用域 —— 谁拥有数据的访问权
    • localStorage: 在同一个浏览器内，同源文档之间共享 localStorage 数据，可以互相读取、覆盖。
    • sessionStorage: 与 localStorage 一样需要同一浏览器同源文档这一条件。不仅如此，sessionStorage 的作用域还被限定在了窗口中，也就是说，只有同一浏览器、同一窗口的同源文档才能共享数据。

二，vuex----集中式数据管理中心

vuex 属于js，因此vuex使用的数据自然会放在内存。而浏览器在每次刷新页面之后都会清空一次内存，因此vuex存储的消息自然就会消失

主要功能：

      actions和mountaion的区别：

actions：可异步

1. 组件之间的数据通信

2. 使用单向数据流的方式进行数据的中心化管理

3. 视图通过点击事件，触发mutations中方法，可以更改state中的数据，一旦state数据发生更改，getters把数据反映到视图
4. • 数据：state --> data
   • 获取数据：getters --> computed
   • 更改数据：mutations --> methods