前端入坑体验与分享

1、Vue变化检测

• 背景
  初始化对象，属性未知；某些事件触发时，对象改变（新增属性），Vue监听不到
• 缘由
  Vue.js 不能检测到对象属性的添加或删除，由于Vue.js 在初始化实例时将属性转为 getter/setter，因此属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。

• 官方说明

  https://v1-cn.vuejs.org/guide/reactivity.html

• 解决方案
  建立一个新的对象，包含原对象的属性和新的属性：
  

2、Vuex状态持久化

• 背景
  后台管理系统中，用户点击上方一级菜单，获取左侧二级菜单，同时将当前菜单存到Vuex中；刷新页面时，存储状态消失
• 缘由
  JavaScript代码是运行在内存中的，代码运行时的全部变量，函数，也都是保存在内存中的。刷新页面，之前申请的内存被释放，从新加载脚本代码，变量从新赋值，因此这些数据要想储存就必须储存在外部，例如：Local Storage, Session Storage等。这些是浏览器提供的API，能够将数据储存在硬盘上，作持久化储存。
• 解决方案
  vuex-persistedstate
  vuex-persistedstate uses the browser's local storage to persist your state across sessions

3、Vue2.0过滤器

Vue2.0将插入文本以外的过滤器移除了

Vue2.0中，过滤器只能用在插入文本中 ({{ }} tags)。在指令 (如：v-model，v-on等) 中使用过滤器使事情变得更复杂。像v-for 这样的列表过滤器最好把处理逻辑做为一个计算属性放在 js 里面，这样就能够在整
个模板中复用

参考：https://cn.vuejs.org/v2/guide...

4、Js深拷贝浅拷贝

• 背景
  项目中，对接收到的数据对象直接拷贝，处理后，提交到服务器，发现组装数据时，子类改变后，父类也改变了。
• 缘由
  在js中，对于非基本类型数据（普通对象或数组），浅拷贝只是拷贝了内存地址，修改新对象会致使原对象被修改
• 解决方案
  深拷贝：深拷贝会另外创造一个如出一辙的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象
  

• 常见浅拷贝方式
  （1）直接复制
  （2）Object.assign

  这是是ES6的新函数，此方法能够把任意多个的源对象自身的可枚举属性拷贝给目标对象，而后返回目标对象。可是 Object.assign() 进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象自己。

  须要注意的是：

  Object.assign()能够处理一层的深度拷贝
  ![图片描述][3]

• 常见深拷贝方式

  （1）转成 JSON 再转回来

  用JSON.stringify把对象转成字符串，再用JSON.parse把字符串转成新的对象。
  坏处：这种发放会抛弃对象的constructor。也就是深拷贝以后，无论这个对象原来的构造函数是什么，在深拷贝以后都会变成Object。这种方法能正确处理的对象只有 Number, String, Boolean, Array, 扁平对象，即那些可以被 json 直接表示的数据结构。RegExp对象是没法经过这种方式深拷贝。也就是说，只有能够转成JSON格式的对象才能够这样用，像function没办法转成JSON。

能够看到：要复制的function会直接消失，因此这个方法只能用在单纯只有数据的对象。

（2）递归拷贝

![图片描述][5]

（3）使用Object.create()方法

![图片描述][6]

（4）jquery 有提供一个$.extend能够用来作深拷贝
（5）loads：函数库lodash也有提供_.cloneDeep用来作深拷贝。

![图片描述][7]![图片描述][8]

5、跨域

• 概念
  跨域是指一个域下的文档或脚本试图去请求另外一个域下的资源，这里跨域是广义的。
  广义的跨域：
  1.) 资源跳转： A连接、重定向、表单提交
  2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链
  3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操做等
  其实咱们一般所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。
• 同源策略
  同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，若是缺乏了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即使两个不一样的域名指向同一个ip地址，也非同源。

  同源策略限制如下几种行为：
  1.) Cookie、LocalStorage 和 IndexDB 没法读取
  2.) DOM 和 Js对象没法得到
  3.) AJAX 请求不能发送

• 常见跨域场景

• 跨域解决方案
  一、 经过jsonp跨域
  二、 document.domain + iframe跨域
  三、 location.hash + iframe
  四、 window.name + iframe跨域
  五、 postMessage跨域
  六、 跨域资源共享（CORS）
  七、 nginx代理跨域
  八、 nodejs中间件代理跨域
  九、 WebSocket协议跨域
  参考：https://segmentfault.com/a/11...