Vue全家桶系列【系統搭建中.....】

本文轉載自查看原文 2021-09-02 17:51 422 09-Vue全家桶

一. 簡介

1. 說明

　 Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。

Vue2.x ：

　　官網地址：https://cn.vuejs.org/

　　GitHub地址：https://github.com/vuejs/vue

　　CDN地址：https://cdn.jsdelivr.net/npm/vue/dist/vue.js

Vue3.x：

　　官網地址：https://v3.cn.vuejs.org/　　

　　GitHub地址：https://github.com/vuejs/vue-next

　　CDN地址：<script src="https://unpkg.com/vue@next"></script>

2. MVVM模型

(1). MVC和MVVM都是一種軟件的體系結構

　MVC是Model – View –Controller的簡稱，是在前期被使用非常框架的架構模式，比如iOS、前端；

　MVVM是Model-View-ViewModel的簡稱，是目前非常流行的架構模式；

(2). 通常情況下，我們也經常稱Vue是一個MVVM的框架。

　Vue官方其實有說明，Vue雖然並沒有完全遵守MVVM的模型，但是整個設計是受到它的啟發的 (Dom部分是View，Script部分中代碼是Model，Vue是VM)

3. Vue2快速入門

(1). 代碼實操

<body>
    <div id="app">
        {{message}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue2!'
            }
        })
    </script>
</body>

(2). 運行結果

3. Vue3快速入門

(1). 代碼實操

<body>
    <div id="app">{{message}}</div>
    <script src="https://unpkg.com/vue@next"></script> 
    <script>
         Vue.createApp({
             data() {
                return {
                  message: 'Hello Vue3!'
                }
             }
         }).mount('#app');        
    </script>
</body>

(2). 運行結果

二. 走向Vue3

1. 源碼

(1). 源碼通過monorepo的形式來管理源代碼：

　Mono：單個

　Repo：repository倉庫

　主要是將許多項目的代碼存儲在同一個repository中；

　這樣做的目的是多個包本身相互獨立，可以有自己的功能邏輯、單元測試等，同時又在同一個倉庫下方便管理；

　而且模塊划分的更加清晰，可維護性、可擴展性更強；

(2). 源碼使用TypeScript來進行重寫：

　在Vue2.x的時候，Vue使用Flow來進行類型檢測；

　在Vue3.x的時候，Vue的源碼全部使用TypeScript來進行重構，並且Vue本身對TypeScript支持也更好了；

2. 性能

(1). Vue3 使用Proxy進行數據劫持

　在Vue2.x的時候，Vue2是使用Object.defineProperty來劫持數據的getter和setter方法的；這種方式一致存在一個缺陷就是當給對象添加或者刪除屬性時，是無法劫持和監聽的；所以在Vue2.x的時候，不得不提供一些特殊的API，比如$set或$delete，事實上都是一些hack方法，也增加了開發者學習新的API的成本；

　而在Vue3.x開始，Vue使用Proxy來實現數據的劫持，這個API的用法和相關的原理我也會在后續講到；

(2). 刪除了一些不必要的API：

　移除了實例上的$on, $off 和 $once；

　移除了一些特性：如filter、內聯模板等；

(3). 包括編譯方面的優化：

　生成Block Tree、Slot編譯優化、diff算法優化；

3. 新Api

(1). 由Options API 到 Composition API：

　在Vue2.x的時候，我們會通過Options API來描述組件對象；Options API包括data、props、methods、computed、生命周期等等這些選項；存在比較大的問題是多個邏輯可能是在不同的地方：比如created中會使用某一個method來修改data的數據，代碼的內聚性非常差；

　在Vue3.x的時候，Composition API可以將相關聯的代碼放到同一處進行處理，而不需要在多個Options之間尋找；

(2). Hooks函數增加代碼的復用性：

　在Vue2.x的時候，我們通常通過mixins在多個組件之間共享邏輯；但是有一個很大的缺陷就是 mixins也是由一大堆的Options組成的，並且多個mixins會存在命名沖突的問題；

　在Vue3.x中，我們可以通過Hook函數，來將一部分獨立的邏輯抽取出去，並且它們還可以做到是響應式的；

如何從Vue2遷移到Vue3，詳見下面官方文檔：

　 https://v3.cn.vuejs.org/guide/migration/introduction.html

三. 目錄

階段一：Vue2.x用法

　　第一節：Vuejs入門之各種指令

　　第二節: Vuejs常用特性1

　　第三節：Vuejs常用特性2和圖書案例

　　第四節：Vuejs組件及組件之間的交互