Vue.js复习笔记三（Sun）

五  Vue的双向绑定原理

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。
我们已经知道实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着，我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令（如v-model，v-on）对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。因此接下去我们执行以下3个步骤，实现数据的双向绑定：

1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

2.实现一个订阅者Watcher，每一个Watcher都绑定一个更新函数，watcher可以收到属性的变化通知并执行相应的函数，从而更新视图。

3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令（v-model，v-on等指令），如果节点存在v-model，v-on等指令，则解析器Compile初始化这类节点的模板数据，使之可以显示在视图上，然后初始化相应的订阅者（Watcher

 

六  什么是跨域？跨域限制了什么？不同源的话会进行什么策略？

一、为什么会出现跨域问题

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

二 url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

三、非同源限制

【1】无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

【2】无法接触非同源网页的 DOM

【3】无法向非同源地址发送 AJAX 请求

四、跨域解决方法

跨文档通信 API：window.postMessage()

调用postMessage方法实现父窗口http://test1.com向子窗口http://test2.com发消息（子窗口同样可以通过该方法发送消息给父窗口）

JSONP

JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。

核心思想：网页通过添加一个<script>元素，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。

CORS

CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。

1、普通跨域请求：只需服务器端设置Access-Control-Allow-Origin

2、带cookie跨域请求：前后端都需要进行设置

 

七   this的指向问题，怎么改变this的指向（apply，bind，call）

this有四种绑定规则，默认绑定、隐式绑定、显示绑定、new 绑定，优先级由低到高在ECMA内，this 会调用原生方法 ResolveThisBinding() 原生方法，该方法使用正在运

行的执行上下文的 LexicalEnvironment 确定关键字this的绑定

可以简单总结为：谁直接调用产生这个this指针的函数，this就指向谁

this在一般模式下指向全局对象；严格模式下 this 默认为undefifined

箭头函数没有自己的this指针，它的this绑定取决于外层（函数或全局）作用域）

call，apply，bind在非箭头函数下修改this值（箭头函数下只传递参数），不管call , bind, apply多少次，函数的this永远由第一次的决定

 

八  promise和await、async的区别

Promise是一种异步编程的解决方法，相比容易陷入回调地狱的回调函数，采用链式调用的

方式更合理也更方便，Promise有三种状态： pending （进行中）、 fulfilled （已成

功）和 rejected （已失败），接受一个作为函数作为参数，该函数有两个参数，分别是

resolve 和 reject 两个函数

async/await与promise的区别

函数前使用关键字async，await只能用在async标记的函数内。

比promise更简洁

处理结果上：promise需要使用.then()来处理promise返回的结果，而async/await则直接在代码上顺序处理结果。

错误处理：promise如果在then里出现异常，只能用promise的catch函数来捕获，外面的try/catch捕获不到。async/await可以同时捕获异步和同步代码抛出的异常。