Vue全家桶系列【vue3更新中.....】vue全家桶有什么

摘要：

Vue2.x：官方网站地址：https://cn.vuejs.org/GitHub地址：https://github.com/vuejs/vueCDN地址：https://cdn.jsdelivr.net/npm/vue/dist/vue.jsVue3.x：官方网站地址：https://v3.cn.vuejs.org/GitHub地址：https://github.com/vuejs/vue-nextCDN地址：2.MVVM模型。MVC和MVVM都是软件架构，但整个设计都受其启发。3.Vue2快速入门。代码实践{｛message｝}varapp=newVue（｛el:'#app'，数据：｛message:'HelloVue2！

一. 简介

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). 运行结果

Vue全家桶系列【vue3更新中.....】第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). 运行结果

Vue全家桶系列【vue3更新中.....】第3张

二. 走向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组件及组件之间的交互