Vue3 快速上手 -第一章

Vue3是MVVM框架

首先了解下MVVM，从以下几点介绍

1、MVC和MVVM的区别

MVC是指Modal、View、Control。分别是数据层，视图层，控制层。

MVVM 指 Modal、View、ViewModel视图数据

2、MV中的ViewModel，是数据model中会挂载到vm，vm劫持数据并将数据渲染到view层

3、 数据更新也会回调给vm，再返回到model

4、vue是如何实现MVVM的呢

双向数据绑定---》模版指令{{ }} 通过这个花括号，正向劫持，反向监听

通过监听绑定事件 ，也可以处理数据。比如@click，还有一些指令语法糖v-model

Vue3的生命周期

生命周期分为以下3个阶段

1、创建页面阶段（beforeCreat,created,beforeMount,mounted）

2、数据更新阶段(beforeUpdate,Updated)

3、页面销毁阶段(beforeUnMount,unMounted)

Vue3对比Vue2的更新点

1、重写双向数据绑定

Vue2中的双向数据绑定使用的是Object.defineProperty()，get,set进行数据绑定更新

Vue3中则针对数组对象使用的是代理Proxy。基本数据类型依然使用Object.defineProperty()；

2、VDOM性能瓶颈

在Vue2中,每次更新diff,都是全量对比,Vue3则只对比带有标记的,这样大大减少了非动态内容的对比消耗

3、Fragments

Vue3支持多个根节点,而Vue2只支持一个根节点

Suspense Teleport和  多 v-model 用法

4、Tree-Shaking的支持

Vue3打包时将没有用到的代码删除，减少代码体积和运行效率

5、Composition APl

Vue2中使用的是Option API,Vue3使用的是组合式-Composition APl，setup是其语法糖编程模式。

<script setup lang="ts">

</script>