前端入坑体验与分享

一、Vue变化检测

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

• 官方说明

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

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

二、Vuex状态持久化

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

三、Vue2.0过滤器

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

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

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

四、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]

五、跨域

• 概念
  跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。
  广义的跨域：
  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 请求不能发送

• 常见跨域场景

• 跨域解决方案
  1、 通过jsonp跨域
  2、 document.domain + iframe跨域
  3、 location.hash + iframe
  4、 window.name + iframe跨域
  5、 postMessage跨域
  6、 跨域资源共享（CORS）
  7、 nginx代理跨域
  8、 nodejs中间件代理跨域
  9、 WebSocket协议跨域
  参考：https://segmentfault.com/a/11...