Vue

　　作者：尤雨溪

Vue.js 是一套構建使用者介面的 漸進式框架。

Vue中文網
Vue3中文文件
vue-router
vue-cli

Vue介紹：

特點：MVVM框架、雙向資料繫結原理、資料驅動、易學、輕量、元件化、簡潔、高效、模組友好

MVVM框架：Model（模型） View（檢視） View Modle（檢視資料）

• V：html介面
• M：存資料的
• VM：通過檢視去操作資料，也能通過資料操作檢視（雙向資料繫結），是資料和介面的排程者

拓展 MVC：Model View Control (模型、檢視、控制器) 代表框架 - react

Vue和angular簡單對比：

• Vue----簡單，易學，弱主張，只要會點html、css、js，加點vue的思想就能學會（自由）

  • 指令以v-xxx，屬性方法均掛在Vue的例項上，適用於移動端專案

• angular---學習曲線陡峭，框架粘性很強（強主張）只要一開始用，那麼這個專案就要一直用它，不能喝別的框架耦合。

  • 指令以ng-xxx，屬性方法均掛在$scope上，適用於pc端專案

• 均不支援IE8以下版本

vue 對比 react 的優勢：

• API設計上簡單，語法簡單，學習成本低

• 基於依賴追蹤的觀察系統，並且非同步佇列更新

• 簡單的語法及專案搭建 ，更快的渲染速度和更小的體積

• 渲染效能：

  • 渲染使用者介面的時候，dom的操作成本是最高的，那為了儘可能的減少對dom的操作，Vue和React都利用虛擬DOM來實現這一點，但Vue的Virtual DOM實現（一個陷阱的叉子）的權重要輕得多，因此比React的引入開銷更少。

  • Vue 和 React 也提供功能性元件，這些元件因為都是沒有宣告，沒有例項化的，因此會花費更少的開銷。當這些都用於關鍵效能的場景時，Vue 將會更快。

• 更新效能:
  在react中，當一個元件的狀態發生變化時，它將會引起整個元件的子樹都進行重新渲染，從這個元件的根部開始。那為了避免子元件不必要的重新渲染，您需要隨時使用shouldComponentUpdate，並使用不可變的資料結構。 在Vue中，元件的依賴關係在它的渲染期間被自動跟蹤，因此係統準確地知道哪些元件實際上需要重新渲染。這就意味著在更新方面,vue也是快於React

• 開發中:
  在開發中，Vue 每秒最高處理 10 幀，而 React 每秒最高處理不到 1 幀。這是由於 React 有大量的檢查機制，這會讓它提供許多有用的警告和錯誤提示資訊。vue在實現這些檢查時，也更加密切地關注了效能方面。

Vue 學習總結（這裡不詳細展開）

當前學習了幾個 Vue 提供的標籤了？分別的作用是什麼？

• <component></component>：空標籤（佔位符）通常和:is="元件名"一起使用，在react中有<React.Fragment></React.Fragment>
• <template></template>：在被控制的 #app 外面，使用 template 元素，定義元件的模板結構。

    <div id='app2'>
      <login></login>
    </div>
  
    <template id='tmpl2'>
      <h1>定義一個 template 私有元件 login</h1>
    </template>
  

    const vm2 = new Vue({
      el: "#app2",
      components: { // 定義例項內部私有元件
        login: {
          template: '#tmpl2'
        }
      },
    });
  

• <transition></transition>：使用 transition 元素，把需要被動畫控制的元素，包裹起來（詳情檢視vue-動畫）。
• <transition-group></transition-group>：給通過 v-for 迴圈渲染出來的列表新增動畫。
• <router-view></router-view>：這是 vue-router 提供的元素，專門用來，當作佔位符的，將來路由規則，匹配到的元件
  就會展示到這個 router-view 中去。所有，我們可以吧 router-view 認為是一個佔位符
• <router-link to='/'></router-link>：預設渲染成 a 標籤，可通過 tag 屬性設定渲染的標籤型別，類似 react 中的

    import { Link } from 'react-router';
    <Link to='/'></Link>
  

vue 的指令

• v-cloak: 使用 v-cloak 能夠解決 插值表達<p>{{ msg }}</p>式閃爍的問題。
• v-text: 使用 v-text , 是沒有閃爍問題的,應為在標籤中沒有寫任何內容。
• v-html: 可以解析字串中的 html 標籤，插值表示式 和 v-text 不行。
• v-bind: 繫結屬性機制，簡寫 :。
• v-on: 事件繫結機制，簡寫 @，語法: v-on:不帶on的事件='註冊的函式'，舉例：v-on:mouseover="showFn"。
• v-for: 可迴圈遍歷陣列，物件，渲染出來的標籤，記得使用 :key 。
• v-model: 雙向資料繫結，通常用在 表單元素。
• v-if、v-else、v-slse-if：就是字面意思，可用來判斷需要渲染的標籤，每次都會重新刪除或建立元素，有較高的切換效能消耗。
• v-show：每次更新不會重新進行DOM的刪除和建立操作，只是切換了元素的 display: none 樣式，有較高的初始渲染效能消耗。
  • v-if、v-show、:is 作用類似，都可以完成元件的切換。按具體的業務需要，酌情使用。

vue 例項上的屬性

  const vm = new Vue({
    el: "#app", 
    data: { // 資料狀態
      firstName: "",
      lastName: "",
      // fullName: "",
    },
    methods: { // 私有方法
      show() {
        this.fullName = this.firstName + "-" + this.lastName;
      },
    },
    watch: { // 監聽屬性
      // 當 firstName 發生改變的時候，觸發對應的函式。
      firstName: function (newVal, oldVal) {
        this.show();
      },
      lastName: function () {
        this.show();
      }
    },
    computed: { // 計算屬性
      // 當函式中的所使用到的資料狀態發生改變，觸發函式。
      fullName() {
        return this.firstName + "-" + this.lastName;
      }
    },
    filters: { // 私有過濾器

    },
    directives: { // 註冊私有指令

    },
    components: { // 定義例項內部私有元件

    },

    router, // 將路由規則物件，註冊到 vm 例項上，用來監聽 URL 地址變化，然後展示對應的元件。

    store, // 將 Vuex.Store 的例項，註冊到 vm 例項上。
    
    // 一下是生命週期函式：
    beforeCreate() {
      // 在此生命週期函式執行的時候，data 和 methods 中的資料都還沒有被初始化
    },
    created() {
      // 在此生命週期函式執行的時候，data 和 methods 中的資料都被初始化好了。（請求資料,關閉loading狀態）
    },
    beforeMount() {
      // 模板已經編譯完成，尚未渲染到頁面中去
    },
    mounted() {
      // 表示記憶體中的模板已經真實掛載到頁面中，使用者可以看到渲染好的頁面了（DOM渲染之後，可以獲取頁面的元素（主要是資料生成出來的元素））
      // mounted 是例項建立期間的最後一個生命週期函式，當執行完 mounted 就表示，例項已經被完全建立好了。
    },
    beforeUpdate() {
      // 狀態更新之前執行此函式，此時 data 中的狀態值是最新的，但是介面上顯示的資料還是舊的，因為此時還沒有開始從新渲染DOM節點。
    },
    updated() {
      // 例項更新完畢之後呼叫此函式，此時 data 中的狀態值和介面是哪個顯示的資料，都已經完成了更新，介面已經被重新渲染好了。
    },
    beforeDestroy() {
      // 例項銷燬之前呼叫，在這一步，例項任然完全可用。（關掉定時器、狀態的初始化）
      clearTimeout(this.timer)
    },
    destroyed() {
      // 例項銷燬後呼叫，呼叫後，Vue 例項指示的所有東西都會解繫結，所有的事件監聽器都會被移除，所有的字例項也會被銷燬。
    }
  })

注意：元件中所有屬性和例項上的基本一致，但是，有一點不一樣的：元件中 data 屬性不在是一個物件，而是一個方法，返回一個物件

  data: () => {
    return {
      msg: '這是元件中的 data 定義的資料',
      num: 1
    }
  }