介绍Vue

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

官方网址：cn.vuejs.org/

MVVM架构

简介

MVVM是Model-View-ViewModel的简写。它本质上就是MVC的改进版。MVVM模式有助于将应用程序的业务和表示逻辑与用户界面(UI) 清晰分离。保持应用程序逻辑和UI之间的清晰分离有助于解决许多开发问题，并使应用程序更易于测试、维护和演变。它还可以显著提高代码重用机会，并允许开发人员和UI设计人员在开发应用各自的部分时更轻松地进行协作。

View：视图层（UI用户界面）
ViewModel: 业务逻辑层（一切js可视为业务逻辑）
Model：数据层（存储数据以及对数据的处理）

优点

1.逻辑控制简洁清晰

ViewModel分离出来大部分的Controller代码，更加清晰和容易维护。

2.方便测试

大部分Bug来自于逻辑处理，由于ViewModel把逻辑分离出来，可对ViewModel构造单元测试。

3.开发解耦

敏捷开发中，并非等后端接口提供后再开发，提供前可完成Controller和View的开发工作。

Vue3新特性

重写双向绑定实现方式

Vue2基于 Object.defineProperty() 实现对数据的劫持，从而实现双向数据绑定

Vue3基于Proxy 实现对数据的劫持,从而实现双向数据绑定

proxy与Object.defineProperty相比

Object.defineProperty
- 对象(Object)，不能监听数组的变化，无法触发push, pop, shift, unshift,splice, sort, reverse
- 必须遍历对象的每个属性
- 只能劫持当前对象属性，如果想深度劫持，必须深层遍历嵌套的对象
Proxy
- 可以直接监听对象而非属性
- 可以直接监听数组的变化

proxy的优势

丢掉麻烦的备份数据
省去for in 循环
可以监听数组变化
代码更简化
可以监听动态新增的属性
可以监听删除的属性
可以监听数组的索引和 length 属性

新增Composition Api

传统Vue2中我们使用options Api进行开发，如下图，我们会发现使用选项式Api会造成逻辑分散、可读性差、可维护性差等问题

而Vue3使用Composition Api就可以解决这个问题，在Vue3中使用声明式Api时，逻辑分明、可维护性高

Fragment

vue3 允许我们支持多个根节点

<template>
    <div></div>
    <div></div>
</template>

支持render JSX 写法

render() {
    return (
        <>
            {this.visable ? (
                <div>{this.obj.name}</div>
            ) : (
                <div>{this.obj.price}</div>
            )}
            
            <input v-model={this.val}></input>
            
            {[1, 2, 3].map(item => {
               return <div>{item}-----</div>
            })}
        </>
    )
}

同时新增了Suspense、teleport和多v-model 用法

Tree shaking

当你通过构建工具使用时，Vue 的许多 API 都是可以“tree-shake”的。例如，如果你不使用内置的 <Transition> 组件，它就不会被包含在最终的生产环境包里。

简单来讲，就是在保持代码运行结果不变的前提下，去除无用的代码

在Vue2中，无论我们使用什么功能，它们最终都会出现在生产代码中。主要原因是Vue实例在项目中是单例的，捆绑程序无法检测到该对象的哪些属性在代码中被使用到

而Vue3源码引入tree shaking特性，将全局 API 进行分块。如果你不使用其某些功能，它们将不会包含在你的基础包中

Vue3介绍及与Vue2的对比