Vue & Vue3

**Vue**一套用于构建用户界面的渐进式框架: 在项目中可以一点点来引入和使用Vue，不一定需要全部使用Vue来开发整个项目。

Vue3 更好的性能、更小的包体积、更好的TypeScript集成、更优秀的API设计

变化

源代码采用MonoRepo来进行管理，将许多项目的代码存储在同一个repository
源码使用TypeScript重写
使用Proxy进行数据劫持
删除了一些不必要的API，移除了$on.$off和$once以及内联模版等
编译优化：生成BlockTree、Slot编译优化、diff算法优化
⭐ 新的API，Options API -> Composition API

如何使用Vue3

1. 页面中通过CDN引入

CDN Content Delivery/Distribution Network(内容分发网络) 从最近的服务器里获取数据提高效率

HTML中引入

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>

    <!-- cdn引入 -->
    <script src="https://unpkg.com/vue@next"></script>
    
    <script>
      const obj = {
        template: "<h1>Hello Vue!</h1>",
      };
      
      // 调用cdn脚本中的函数 -> 根据一个对象创建app -> 挂载到#app
      Vue.createApp(obj).mount("#app");
    </script>
  </body>
</html>

2. 下载Vue的JavaScript文件，手动引入

类似于cdn，不过是将Vue脚本存储到本地再调用函数创建app对象

3. 通过npm安装使用

Todo：后续补上

4. 通过Vue CLI创建项目

Todo：后续补上

声明式 & 命令式

两种不同的编程范式，声明式关注“What to do”，命令式关注“How to do”。

Vue属于声明式编程，框架封装了相关函数完成相应操作。声明数据，声明函数，声明模版，框架会自己将数据渲染到模版中。
命令式编程由指令流组成，面向过程进行相关指令操作

MVC & MVVM

MVC和MVVM是不同的软件体系结构
MVC Model-View-Controller，前期主流架构模式如IOS、前端
对于一个简单的HTML页面，有HTML代码、有JS代码。
其中HTML语义化代码就是View;JS代码是Controller；在两者之间起到渲染载体的变量是Model（与后端的定义有差异）

MVVM Model-View-ViewModel，目前主流架构模式
Vue的设计受到MVVM的启发

Vue MVCC