Vue的相關

Vue

Vue是一個前端js框架，由尤雨溪開發，是我的項目

Vue近幾年來特別的受關注，三年前的時候angularJS霸佔前端JS框架市場很長時間，接着react框架橫空出世，由於它有一個特性是虛擬DOM，從性能上碾軋angularJS，這個時候，vue1.0悄悄的問世了，它的優雅，輕便也吸引了一部分用戶，開始收到關注，16年中旬，VUE2.0問世，這個時候vue無論從性能上，仍是從成本上都隱隱超過了react，火的一塌糊塗，這個時候，angular開發團隊也開發了angular2.0版本，而且改名爲angular，吸取了react、vue的優勢，加上angular自己的特色，也吸引到不少用戶，目前已經迭代到5.0了。

學習vue是如今前端開發者必須的一個技能。

前端js框架到底在幹嗎，爲何要用

js框架幫助開發者寫js邏輯代碼，在開發應用的時候js的功能劃分爲以下幾點：

1. 渲染數據

2. 操做dom（寫一些效果）

3. 操做cookie等存儲機制api

在前端開發中，如何高效的操做dom、渲染數據是一個前端工程師須要考慮的問題，並且當數據量大，流向較亂的時候，如何正確使用數據，操做數據也是一個問題

而js框架對上述的幾個問題都有本身趨於完美的解決方案，開發成本下降。高性能高效率。惟一的缺點就是須要使用必定的成原本學習。

Vue官網介紹

vue是漸進式JavaScript框架

「漸進式框架」和「自底向上增量開發的設計」是Vue開發的兩個概念

Vue能夠在任意其餘類型的項目中使用，使用成本較低，更靈活，主張較弱，在Vue的項目中也能夠輕鬆融匯其餘的技術來開發，而且由於Vue的生態系統特別龐大，能夠找到基本全部類型的工具在vue項目中使用

特色：易用（使用成本低），靈活（生態系統完善，適用於任何規模的項目），高效（體積小，優化好，性能好）

Vue是一個MVVM的js框架，可是，Vue 的核心庫只關注視圖層，開發者關注的只是m-v的映射關係

與AngularJS的對比

Vue的不少api、特性都與angularJS類似，實際上是由於Vue在開發的時候借鑑了不少AngularJS中的特色，而AngularJS中固有的缺點，在Vue中已經解決，也就是青出於藍而勝於藍，Vue的學習成本比AngularJS低不少，由於複雜性就低

AngularJS是強主張的，而Vue更靈活

Vue的數據流是單向的，數據流行更清晰

Angular裏指令能夠是操做dom的，也能夠封裝一段結構邏輯代碼，例如：廣告展現模塊

Vue中的指令只是操做dom的，用組件來分離結構邏輯

AngularJS的性能比不上Vue

Vue的使用

Vue不支持IE8，由於使用了ES5的不少特性

能夠直接經過script標籤來引入vue.js，有開發版本和生產版本，開發版本通常咱們在開發項目的時候引入，當最後開發完成上線的時候引入生產版本，開發版本沒有壓縮的，而且有不少提示，而生產版本所有刪掉了

在Vue中提供了一個腳手架（命令行工具）能夠幫咱們快速的搭建基於webpack的開發環境...

Vue的實例

每個應用都有一個根實例，在根實例裏咱們經過組件嵌套來實現大型的應用

也就是說組件不必定是必須的，可是實例是必需要有的

在實例化實例的時候咱們能夠傳入一個；配置項，在配置項中設置不少屬性方法能夠實現複雜的功能

在配置中能夠設置el的屬性，el屬性表明的是此實例的做用範圍

在配置中同過設置data屬性來爲實例綁定數據

mvc/mvvm

阮大神博客

mvc 分爲三層，其實M層是數據模型層，它是真正的後端數據在前端js中的一個映射模型，他們的關係是：數據模型層和視圖層有映射關係，model改變，view展現也會更改，當view產生用戶操做或會反饋給controller，controller更改model，這個時候view又會進行新的數據渲染

這是純純的MVC的模式，可是不少框架都會有一些更改

前端mvc框架，如angularjs，backbone：

會發現，用戶能夠直接操做controller（例如用戶更改hash值，conrtoller直接監聽hash值變化後執行邏輯代碼，而後通知model更改）

控制器能夠直接操做view，若是，讓某一個標籤得到進入頁面得到焦點，不須要model來控制，因此通常會直接操做（angularJS，指令）

view能夠直接操做model （數據雙向綁定）

MVP:

mvp

view和model不能直接通訊，全部的交互都由presenter來作，其餘部分的通訊都是雙向的

view較薄 ，presenter較爲厚重

MVVM：

mvvm

MVVM和MVP及其類似，只是view和viewmodel的通訊是雙向綁定，view的操做會自動的像viewmodel經過

v-for

在vue中能夠經過v-for來循環數據的通知循環dom，語法是item in/of items，接收第二個參數是索引 (item,index) of items,還能夠循環鍵值對，第一個參數是value，第二個是key，第三個依然是索引

v-on

在vue中還有v-on來爲dom綁定事件，在v-on：後面加上要綁定的事件類型，值裏能夠執行一些簡單javascript表達式：++ -- = ...

能夠將一些方法設置在methods裏，這樣就能夠在v-on:click的值裏直接寫方法名字能夠，默認會在方法中傳入事件對象，當寫方法的時候加了()就能夠傳參，這個時候若是須要事件對象，那就主動傳入$event

v-on綁定的事件能夠是任意事件,v-on:能夠縮寫爲@

爲何在 HTML 中監聽事件?

你可能注意到這種事件監聽的方式違背了關注點分離 (separation of concern) 這個長期以來的優良傳統。但沒必要擔憂，由於全部的 Vue.js 事件處理方法和表達式都嚴格綁定在當前視圖的 ViewModel 上，它不會致使任何維護上的困難。實際上，使用 v-on 有幾個好處：

1. 掃一眼 HTML 模板便能輕鬆定位在 JavaScript 代碼裏對應的方法。
2. 由於你無須在 JavaScript 裏手動綁定事件，你的 ViewModel 代碼能夠是很是純粹的邏輯，和 DOM 徹底解耦，更易於測試。
3. 當一個 ViewModel 被銷燬時，全部的事件處理器都會自動被刪除。你無須擔憂如何本身清理它們。

響應式原理

由於vue是mvvm的框架，因此當數據變化的時候，視圖會當即更新，視圖層產生操做後會自動通知vm來更改model，因此咱們能夠實現雙向數據綁定，而其中的原理就是實例會將設置的data逐個遍歷利用Object.defineProperty給數據生成getter和setter，當數據變化地方時候setter會監聽到而且通知對應的watcher工具進行邏輯運算會更新視圖

聲明式渲染

在vue中，咱們能夠先在vue實例中聲明數據，而後經過{{}}等方式渲染在dom中

---

function foo(){// 第16行 getName = function(){console.log(1)} return this } foo.getName = function(){console.log(2)} foo.prototype.getName = function(){console.log(3)} var getName = function(){console.log(4)} function getName(){console.log(5)} foo.getName()//2 //foo是一個函數，也能夠說是一個對象，因此它也能夠掛載一些屬性和方法，18行在其上掛載了一個getName方法 //執行的結果是 getName()//4 //21行有一個全局函數，全局函數聲明提早後被20行的getName覆蓋，因此輸出4 foo().getName()//1 //foo()執行完成後，將全局的getName也就是window.getName給更改後返回this，而在這裏this執行的就是window，因此最後執行的就是window.getName，因此輸出1 getName()//1 //在上面已經更改全局的getName，因此依然是1 new foo.getName()//2 //new 操做符在實例化構造器的時候，會執行構造器函數，也就是說，foo.getName會執行，輸出2 new foo().getName()//3 //new操做符的優先級較高，因此會先new foo()獲得一個實例，而後再執行實例的getName方法,這個時候，實例的構造器裏沒有getName方法，就會執行構造器原型上的getName方法 new new foo().getName()//3 //先執行new foo()獲得一個實例，而後在new 這個實例的getName方法,這個時候會執行這個方法，因此輸出3 //除了本地對象的方法，其餘的函數都能new

---

響應式原理（mvvm）

//ES5中有Object.defineProperty()能夠，爲某一個對象的屬性建立出setter和getter，setter和getter實際上是兩個工具函數，分別會在數據被更改或者被使用的時候觸發 // 準備給data設置一個msg屬性，這個屬性改變的時候，頁面中的顯示也會改變 // var data = {msg:'hello world'} // a.innerHTML = data.msg // inp.oninput = function () { // data.msg = this.value // a.innerHTML = data.msg // } //M var data = {msg:'hello world'} //VM new Bue({ data:data }) //vm將model的數據顯示在view上，當用戶參數操做，會自動通知viewmodel（事件的處理程序自己就是寫在viewmodel中的），這個時候viewmodel就去更改model，數據更改以後，數據的setter會觸發，viewmodel會通知view進行更新 function Bue(options) { var data = options.data//真正的數據 var _data = {}//專門搞出來的數據 //爲搞出來的數據設置getter和setter let that = this this.watcher = function (newval) { document.getElementById("a").innerHTML = newval } Object.defineProperty(_data,'msg',{ get:function(){//會設置數據的值，會在使用的時候觸發，返回的值是多少，數據就是多少 console.log('getter') return data.msg }, set:function(newval){//數據被更改的時候會觸發set，這個時候再通知viewmodel去控制view層改變 that.watcher(newval) } }) document.getElementById("a").innerHTML = _data.msg inp.oninput = function () { _data.msg = this.value//更改數據 } }

vue響應式原理：

//將數據掛載在vue的實例上的時候，Vue會對這些數據進行遍歷處理，建立watcher，經過監聽setter和getter來通知watcher,watcher進行計算後更新view //數據更改，view更改，view更改，數據更改，這個mvvm裏的一個特性（響應式數據綁定），體現它的效果是數據雙向綁定 //這個特性在vue是經過對數據進行Object.defineProperty處理來實現的，實現的原理vue起了個名字叫響應式原理