vue总结

1.Vue的双向绑定数据的原理

原理：核心就是view变化能实时让model也变化，而model变化也能实时更新view

vue 采用数据劫持，发布-订阅模式，通过Object.defindProperty()方法
劫持各属性的getter和setter,并在数据发生变化的时候通知订阅者，触发
相应的监听回调。（在不同的数据上触发同，可以精确的将变更发送给绑定
的视图，而不是对所有的数据都执行一次检测）

实现数据绑定大致三个模块：Oberver、Compiler、Watcher
Oberver:数据监听器，负责对数据对象的数据进行监听(数据劫持)，监听到变化后通知订阅者
Compiler：指令解析器，并对指令进行解析，然后绑定指定事件
Watcher：关联Oberver和Compiler，能够订阅并收到属性变动的通知，
并执行绑定的相应操作，更新视图（updata是它自身的一个方法，用户执行Compiler绑定的回调，更新视图）。

vue3.0采用proxy,vue2.0使用object.defindProperty
object.defindProperty缺点:
    不能监听数组，因为数组没有getter和setter
    只能监听属性，而不是整个对象，需要遍历属性
    只能监听属性变化，不能监听属性的删减

proxy好处:
    可以监听数
    可以监听整个对象
    13种拦截方法(delete,has,construct)
    返回新对象而不是直接修改原对象，更符合immuabble
   
proxy缺点:
    兼容性不好，无法用polyfill磨平

---

2.vue-router 路由模式及原理

1.hash: url里会带一个#，比较丑，但是可以兼容低版本的ie浏览器。
    原理：url中的哈希值发生变化不会触发HTTP请求，通过监听hashchange，按需加载前端的代码块
2.history : 打包后需要服务器做配置，否则刷新会404.
    nginx:的话需要在location里加try_files $uri $uri/ /index.html。
    node:直接有history模块，app.use(history)注册该模块
    原理:通过 pushState() 改变url,通过popState进行监听加载
3.全局钩子函数(to,from,next)：
    beforeEach：进入路由前，判断是否登录，没登陆跳转登录页
    afterEach：进入路由后，跳转后滚动条回到顶部(window.scrollTo(0,0))
4.组件内的钩子函数：
    beforeRouteEnter  获取不到this
    beforeRouteUpdate 可以获取到this
    beforeRouteLeave  可以获取到this

---

4.跨域问题

 1. jsonp
 2. cors
 3. Node 正向代理 利⽤服务端不跨域的特性
 4. nginx 反向代理 proxy_pass
 5. img标签不存在跨域问题

---

5.内存泄漏

定义：已经不再使用的内存未能被程序释放

内存生命周期：

内存分配：声明变量，函数等，js会自动分配内存
内存使用：调用
内存回收：js有自己回收机制，会自动判断哪些不需要，会自动回收


js 垃圾回收机制：

1.引用计数垃圾回收：判断对象还有没有被引用，如果没有则回收
    缺陷：循环引用，a引用b,b引用a,相互引用的会造成内存泄漏
2.标记清楚算法：无法达到的对象
    从js根本去扫描，通过自己的代码如何能达到某个对象，则说明被使用。如果到不了就说明不在使用


哪些会造成内存泄漏？

1 全局变量,没有声明变量 实际上是全局变量 => window.bar1
2.未被清理的定时器和事件监听，回调函数:
    如果后续 renderer 元素被移除，整个定时器实际上没有任何作⽤。 但如果你没有回收定时
    器，整个定时器依然有效, 不但定时器⽆法被内存回收， 定时器函数中的依赖也⽆法回收。
3. 闭包
    ⼀个内部函数，有权访问包含其的外部函数中的变量


如何避免内存泄露？

减少不必要的全局变量，使⽤严格模式避免意外创建全局变量。
在你使⽤完数据后，及时解除引⽤（闭包中的变量，dom引⽤，事件监听，定时器清除）。
组织好你的逻辑，避免死循环等造成浏览器卡顿，崩溃的问题。

---

6.性能优化

谷歌插件：pagespeed

1.只请求当前需要的资源
    异步，组件懒加载，路由懒加载
1.缩减资源体积
    cdn
    http缓存
    localStorage, sessionStorage
2.合理利⽤缓存
 打包压缩
 gzip
 图⽚格式优化, 压缩(https://tinypng.com/)
 尽量控制cookie⼤⼩，request header里,同域名的请求会把cookie的内容也带上
 3.ssr:在服务端渲染，更好的seo
 4.dns-prefetch：提前解析域名， href 通常写入第三方域名，写入本站域名没有任何效果，因为当浏览器解析到这一行代码的时候，本站域名早已经解析完成。
    使用场景举例
    用户很可能点击某个链接，下载跨域图片。如果当前页面引入了dns-prefetch，当用户真正点链接时，dns的解析早已完成，省去了一些时间。在复杂网络场景下，会有较好的效果。
prerender：提前渲染。非常“重”的一个操作，浏览器会提前完成所有的资源加载，执行，渲染并保存在内存里。以上操作本身也是会耗费浏览器资源的，所以请按需使用。
preload：预加载，比如有些图首屏展示，优先级高可以用这个。本质上是影响资源的加载顺序，把可能后置下载的资源前置下载。
<link rel=“dns-prefetch” href=“xxxxxx” />
<link rel=“preconnect” href=“xxxxxxx” />
<link rel=“preload” as=“image” href=“xxxxxxxxx” />

---

7.闭包

定义:可以在内部函数访问到外部函数的作用域
优点：
1.可以从内部函数访问到外部函数作用域中的变量，且访问到的变量长期存在内存中，可供之后使用
2.避免变量污染全局
3.把变量存在独立的作用域，作为私有成员存在

缺点:
1.使用不当会造成内存泄漏
2.闭包的层级决定了引用的外部变量在查找事经过的作用域链长度

使用场景：
1.模块封装
2.在循环中使用闭包，防止得到意外的值

---

8.事件循环机制（Event Loop）

1.js为什么会有事件循环？
js的任务分为两种，同步和异步，他们的处理方式也各自不同，同步任务：直接放在主线程上排队依次执行，异步任务：会放在任务队列中，若有多个异步任务则需要在任务队列中排队等待，任务下一步会被移到调用栈，然后主线程执行