vue資料雙向繫結的實現原理

前端攻城小牛發表於2018-10-11
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); 
 } 
 }); 
}複製程式碼


相關文章