跨域、vue双向绑定相关面试题

vue数据双向绑定的实现原理

是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

跨域、vue双向绑定相关面试题

懒加载原理？

一般来讲，给图片src配置一个假的地址，同事给添加一个data-url属性指向真是url地址，当图片快要显示的时候将url地址替换成data-url的属性。

vue中watch和computed的区别

watch主要作用是监听路由变化。Computed主要是做计算方法。

前端跨域究竟跨的是什么?

跨域请求针对浏览器的同源策略(Same-Origin Policy)而言，指一个网站主动请求另外一个网站的资源(图片、javascript、视频等)。

Nginx反向代理实现跨域

我们只需要配置Nginx，在一个服务器上配置多个前缀来转发http/https请求到多个真实的服务器即可。这样这个服务器上所有URL都是相同的域名、协议和端口。因此，对于浏览器来说这些URL都是同源的，没有跨域限制。而实际上这些URL实际上由物理服务器提供服务。这些服务器内的JavaScript可以跨域调用所有这些服务器上的URL。

简单说，Nginx服务器欺骗了浏览器，让它认为这是同源调用，从而解决了浏览器的跨域问题。

下面给出一个Nginx支持跨域的例子，进行具体说明。

服务器A(域名:www.hi-linux.com)中有一个页面，想请求服务器B(域名:www.imike.me)中的api地址(http://www.imike.me/api)获取数据。

• Nginx配置

修改配置文件

server {
 listen 80;
 server_name www.hi-linux.com;
 root /var/www/html;
 autoindex off;
 index index.html index.htm index.php; # 将www.hi-linux.com/api的所有请求反向代理到www.imike.me
    
 location ~ ^/api/ {
 proxy_pass http://www.imike.me;
 proxy_redirect off; 
 proxy_set_header X-Real-IP $remote_addr; 
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
 }
 location ~ /.ht {
 deny all;
 }
}

重启Nginx

/etc/init.d/nginx restart

• 修改JS代码中的地址

function getID(){ 
        jQuery.get("http://www.hi-linux.com/api/GetData?id=1”, 
         function (data, textStatus){ 
 this; // 在这里this指向的是Ajax请求的选项配置信息 
 if(textStatus=="success"){ 
 jQuery("#CountNum").html(data); 
 } 
 }); 
}

作者：前端攻城小牛
链接：https://www.jianshu.com/p/7193624a3d76