vue學習筆記

來公司之後就一直在用vue框架，不論是業務代碼，仍是作vue組件。關於vue有一些點是文檔中沒有說起的，記錄一下以便之後查詢～

1、Vue的特色

新一代 Vue.js 框架很是關注如何用極少的外部特性來解決應用程序/視圖狀態同步問題。

Vue.js 大部分是基於vue實例(var vm = new Vue({ ... }))完成的。Vue.js 負責給瀏覽器 DOM 中綁定數據。

一、特色 —— 這部分借鑑淺談Vue.js的幾個特色

（1） 簡潔 （2） 輕量 （3）快速 （4） 數據驅動 （5） 模塊友好 （6） 組件化

二、vue與angularJS的區別

與angularJS1對比

vue不少的語法是借鑑的angular，好比v-if/ng-if、v-model、ng-model等。

複雜性

在API與設計兩方面上Vue.js都比Angular1簡單得多。vue的源碼比angularJS小了將近一半

好比綁定點擊事件：v-on:click='doSomething' 可寫成 @click='doSomthing'

綁定動態數據：v-bind:href='url' 可寫成 :href='url'

數據綁定

angular1使用雙向數據綁定，vue在不一樣組件間強制使用單向數據流。尤爲vue2.0中父子間也強制只能父向子傳遞數據。這使應用中的數據流更加清晰易懂。

並且angularJS綁定數據的代碼也不如vue簡潔。angular裏有什麼ng-app/ng-controller等等設置起來比較繁瑣

性能

Vue 有更好的性能，而且很是很是容易優化，由於它不使用髒檢查。

在 Angular 1 中，當 watcher 愈來愈多時會變得愈來愈慢，由於做用域內的每一次變化，全部 watcher 都要從新計算。而且，若是一些 watcher 觸發另外一個更新，髒檢查循環(digest cycle)可能要運行屢次。

Angular 用戶經常要使用深奧的技術，以解決髒檢查循環的問題。有時沒有簡單的辦法來優化有大量 watcher 的做用域。

Vue 則根本沒有這個問題，由於它使用基於依賴追蹤的觀察系統而且異步隊列更新，全部的數據變化都是獨立觸發，除非它們之間有明確的依賴關係。

組件與指令

在 Vue 中指令和組件分得更加清晰。指令只封裝 DOM 操做，而組件表明一個自給自足的獨立單元 —— 有本身的視圖和數據邏輯

可是，在angular中二者有很多相混的地方。

 

與angularJS2對比

angularjs2實際是一個全新的框架了，並且還用vue同樣的思路解決了angularJS1裏的一些問題。angular1 面向的是較小的應用程序，angular2 已轉移焦點，面向的是大型企業應用。

大小和性能

在性能方面，這兩個框架都很是的快。

但目前尚沒有足夠的數據用例來具體展現。若是你必定要量化這些數據，你能夠查看第三方參照，它代表 Vue 2 相比 Angular2 是更快的。

在大小方面，vue仍是比angular2小得多

雖然 Angular 2 使用 tree-shaking 和離線編譯技術使代碼體積減少了許多。但包含編譯器和所有功能的 Vue2(23kb) 相比 Angular 2(50kb) 仍是要小的多。可是要注意，用 Angular 2 的 App 的體積縮減是使用了 tree-shaking 移除了那些框架中沒有用到的功能，但隨着功能引入的不斷增多，尺寸會變得愈來愈大。

靈活性

Vue 相比於 Angular 2 則更加靈活

Vue 官方提供了構建工具來協助你構建項目，但它並不限制你去如何構建。有人可能喜歡用統一的方式來構建，也有不少開發者喜歡這種靈活自由的方式。

學習曲線

Vue可以快速上手。你使用的是熟悉的 HTML、符合 ES5 規則的 JavaScript（也就是純 JavaScript）。有了這些基本的技能，你能夠快速地掌握它(指南)並投入開發 。

Angular 2 的學習曲線是很是陡峭的。即便不包括 TypeScript，它的開始指南中所用的就有 ES2015 標準的 JavaScript，18個 NPM 依賴包，4 個文件和超過 3 千多字的介紹，這一切都是爲了完成個 Hello World。而Vue’s Hello World就很是簡單。甚至咱們並不用花費一整個頁面去介紹它。

 

2、使用過程當中的一些總結

• 首先要提一下vue父實例中的data屬性

      寫成data:function(){return{...}}的形式：表示的是一個返回數據對象的函數，而不是直接返回數據對象。採用該方法的緣由是，你建立了一個可在多個位置重用的組件，你不但願全部類型實例共享data字段，若是它是一個直接對象，上述問題就不可避免。

• 過渡效果的實現

        vue2.0也是有改動的，不過我實現過渡效果是用的vue1.0的要求實現的，由於公司原有的部分仍是應用的vue1.0。大體寫下1.0版本下實現的關鍵點：

// 在標籤中加入transition，配合v-if/v-show改變，就觸發過渡的css變化
<div v-if="show" transition='fade'>
// 或是寫成下面這樣，而後在vue父實例的data中定義transitionName: 'XXX'
<div v-if="show" transition='transitionName'>

// 寫CSS樣式：
  .fade-transition {}   —— 始終保留在元素上的
  .fade-enter {}   —— 進入過渡狀態的一瞬間的樣式，結束後刪除
  .fade-leave {}   —— 離開過渡的結束狀態的一瞬間的樣式，結束即刪除

// 還能夠配合hooks使用：
Vue.transition('fade',{
　　beforeEnter: function(el){},
　　enter: function(el){},
   alertEnter: function(el){},
   ......具體有哪些須要的時候能夠看文檔～
})

　　這裏你定義的transitionName是XXX，CSS樣式這裏就寫XXX-transition/enter/leave，要對應！

• 還有就是在使用了v-for後，若是咱們要動態的去取每個的值，好比放在方法內作參數，或是放在style中，如何書寫？我總結爲大體三種寫法：

  <div class="recommend_shop" v-for="rshop in recommend_shop">
       <div class="group_img" :style="{ backgroundImage: 'url('+ rshop.group_header +')'}"v-on:click="openGroup( rshop.group_id )">  
       </div>
  
       <div class="group_info">成交 {{ rshop.goods_nums }}</div>
  </div>
  

  　　這裏:style="{ backgroundImage:'url('+ ... +')' }" 和 v-on:click="openGroup( ... )"的寫法要注意！

• 如何封裝組件？

       一開始我寫組件，只知道組件就是把一個經常使用的功能封裝起來，具體這個封裝體如今哪裏？就比如你拿一個轉換插頭，你不知道里面它有什麼邏輯，裝了什麼亂七八糟的東西，可是你提供了一個插孔和一個插頭，這個插孔就是組件要預留出來的可能要傳進來的一些數據，插頭就是組件最後要傳給外部的一些外部須要的數據。

• 還有就是slot的使用，

        這個我以前也記錄過，我當時理解slot的時候把官方文檔的三個例子都寫了一遍，盯着看了好一會才懂。。。我也是對本身無語了。。。

 

 

3、vue2.0的改變點：

• 1.0裏的鉤子函數ready廢棄了，在2.0使用mounted代替。還移除了beforeCompile（Created代替）、compiled（mounted代替），新增了beforeMount、beforeUpdate、update等（這幾個我還沒用過哈哈）
• events、$dispatch、$broadcast廢棄了。
• 子組件給父組件傳遞參數，發送事件時原來咱們使用$dispatch()，可是2.0刪掉了這個方法，可是有它的辦法來實現，我總結爲如下三個關鍵點（以作過的一個分頁組件部分代碼爲例）：

  // 在父實例page.js中定義想要操做的事件
  data: function(){
  　　curPage: 1
  }
  methods: {
      changePage: function(){
            this.curPage = cur;  
      }  
  }        
  

  　　

  // 在html的<page>標籤上添加v-on:click事件
  // 父組件用v-on監聽事件
  <page :data-num="pagedata.length" :each="eachPageSize" :visiblepage="visiblepage" v-on:change-page="changePage"></page>
  

  　　

  // 子組件模板（pages是個數字數組）
  <li v-for="index in pages" v-bind:class="{ active: curPage == index }">
      <a v-on:click="btnClick(index)">{{ index }}</a>
  </li>
  
  // 在子組件page.vue中：點擊事件中添加：$emit()，將事件傳播到父組件
  methods: {
           btnClick: function(index){
               this.curPage = index
               this.$emit('change-page', index)
           }
  }

  　　怎麼把點擊的是哪一個數字傳到父組件，使父組件可使用這個數字去作其餘的操做？總體流程是：點擊子組件中的點擊按鈕觸發btnClick(index)方法，btnClick中，利用this.$emit('change-page',index)觸發change-page事件而且將當前的頁碼值以index參數的形式傳到父組件，父組件利用v-on:change-page='changePage'監聽到子組件傳來的change-page，調用父組件中的changePage方法，在這裏完成 「子組件數據傳到父組件」 這件事～ this.curPage = index; 這句就將子組件裏的點擊的那個數字賦值給curPage了，這個curPage是在父組件的data裏定義的～～吼吼，就是這麼個過程～～

• v-for循環中經常使用的$index、$key也不支持了。
• 不支持雙向綁定啦～v-bind的.once .sync都刪掉啦！props裏傳進來的data值是不可變的！！並且還須要驗證～有兩種方式會改變props：

1. 定義一個局部的data屬性，將props的初始值做爲局部數據的初始值傳入：

      props: {
           navs: {         // 從父級傳來的navs
               type: Array
               , default: function(){
                   return {}
               }
           }
       }
       , data: function(){
           return {    // 這裏利用傳來的navs來設置初始值cur
               cur: this.navs[0].en_name
           }
       }　　

2. 定義一個computed屬性，裏面能夠定義一些屬性從props的值計算得出：

       props: {
           dataNum: {       // 傳進來的內容總數
               type: Number
               , default: 100
           }  
           , each: {         // 單頁的個數
               type: Number
               , default: 10
           }
       }
       , computed: {
           totalPages: function(){      // 計算得出總頁數，根據父組件傳進來的值的不一樣獲得不一樣的頁數
               return Math.ceil(this.dataNum / this.each) || 0
           }
   

 

 

      用的多了果真以爲順手多了。。。仍是要繼續學習～～～最近終於弄明白了原型、原型鏈還有閉包，接下來要複習一些算法和基礎知識～～～回了學校還要寫論文，時間真的是不夠用。。。不過想到要回家了仍是忍不住小激動～今天把上線的全部需求改完，最近一版的工做就告一段落了，看小哥還在學vue2.0改版的內容，我也很差閒着，寫完我也去看看。。。同志們共同進步呀～