Vue 筆記（1）

What is Vue?

Vue 是 Vue.js 的簡稱，其是一個 javascript 的庫，是一個 MVVM 庫便是用來構建 UI 的庫。和 jQuery 這種 API 庫所不一樣的是，Vue 是以數據驅動的控制視圖的，而不是散亂的，數據結構零散的。jQuery 的優秀在於提供了良好的 API 兼容性以及簡單好用還能鏈式調用的操做 DOM 的方法，可是呢這些方法之間相互是沒有關係的，不成體系的。

Why i should use Vue or React?

1.在項目前期提供了框架，簡單的事件綁定，不須要手動綁定了，能快速開發；

2.提供了組件，一套體系方便複用和維護；

3.可使用集成了 Webpack 的腳手架，這樣便於構建，大部分也不須要再重複配置了，社區通常也有可參照的；

4.直接的數據聯繫，能夠從數據上預計到視圖的變化，加強了可維護性;

5.不須要 html 和 js 及 css 分開寫了，打包工具會解決，對於全局的樣式、less 變量仍舊須要單獨文件再引入。

Vue 的一些筆記

數據綁定及響應

使用的是 getter、setter 來實現對數據變更的響應。因此對於 data 的直接屬性是須要提早聲明，不然其變量會沒有 getter、setter 於是不能響應其變更。到目前爲止，僅依靠 getter 的 Vue 是檢測不到對象屬性的變化（添加或者刪除）。因此 Vue 有一個 set 靜態方法，能夠解決上述問題。

組件的循環引用

假設你正在構建一個文件目錄樹，像是 Finder 或文件資源管理器。你可能有一個 tree-folder 組件:

<p>
  <span>{{ folder.name }}</span>
  <tree-folder-contents :children="folder.children"/>
</p>

還有一個 tree-folder-contents 組件：

<ul>
  <li v-for="child in children">
    <tree-folder v-if="child.children" :folder="child"/>
    <span v-else>{{ child.name }}</span>
  </li>
</ul>

當你仔細看這兩段代碼時就會發如今渲染樹上這兩個組件同時爲對方的父節點和子節點——這點是矛盾的。當使用 Vue.component 將這兩個組件註冊爲全局組件的時候，Vue 會自動爲你解決這個矛盾，若是你是這樣作的，就不用繼續往下看了。

然而，若是你使用諸如 Webpack 或者 Browserify 之類的模塊化管理工具來導入組件的話，就會報錯了：
Failed to mount component: template or render function not defined.
爲了解釋爲何會報錯，簡單的將上面兩個組件稱爲 A 和 B ，模塊系統看到它須要 A ，可是首先 A 須要 B，可是 A 又須要 B，這樣就陷入了一個死循環，模塊系統會不知道到底應該先獲取哪一個模塊。而要解決這個問題，咱們須要在其中一個組件中（好比 A ）告訴模塊化管理系統：A 雖然須要 B ，可是不須要優先導入 B。

在咱們的例子中，咱們選擇在tree-folder 組件中來告訴模塊化管理系統循環引用的組件間的處理優先級，咱們知道引發矛盾的子組件是tree-folder-contents，因此咱們在beforeCreate 生命週期鉤子中去註冊它：

beforeCreate: function () {
  this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue')
}

這樣問題就解決了。

router-link 的 @click 問題

router-link 上綁定 @click 的話是不觸發對應的方法的，解決辦法一是使用 @click.native 即給元素綁定原生事件而不是 vue 包裝的事件，可是會有一個小問題。就是這個原生點擊事件會在路由跳轉以後再觸發，而不是路由跳轉以前。因此，假如你須要在路由跳轉以前執行的話，那麼你應該再內嵌一個 span 之類的元素，綁定上 @click，這樣就沒問題了。

keep-alive

文檔中提到的是這個主要用於保留組件狀態或避免從新渲染。可是卻搞不清楚怎麼保留的，何時保留，何時更新，另外其在函數式組件中不能正常工做，由於它們沒有緩存實例，因此不要和 一塊兒用。

值得注意的是 v-once 只會渲染一遍。可是組件的 beforeCreate 仍舊會調用。

TODO: 看看源碼的實現