Vue 3.0与Vue 2.0的区别
- 源码组织方式发生变化
- Composition API
- 性能提升
- Vite
Composition API 设计动机
- Vue 2.x开发需要长期迭代的大型项目时，组件的开发采用的是Options API
Options API指的是使用包含一个描述组件选项（data，methods，props等）的对象创建组件的方式，
Options API开发组件时，同一功能逻辑的代码被拆分到不同选项(data，methods，props等)，所以一些功能比较复杂的组件阅读维护起来比较困难,并且难以提取组件中可重用的逻辑，虽然Vue 2.0中有mixins混入的机制可以把组件中重复的代码提取并重用，但mixins存在命名冲突，数据来源不清晰的问题
- Composition API是Vue 3.0新增的一组API是一组基于函数的API，可以更灵活的组织组件内的逻辑
Vue 3.0性能提升
- 响应式系统升级
- Vue 2.x中响应式系统的核心defineProperty，在初始化时遍历data中的所有成员对象，通过defineProperty把对象的属性转换为getter和setter，如果对象的属性还是对象，则会递归处理。这些都是在初始化时进行的，即使你没有使用某个属性，也会进行响应式处理
- Vue 3.0中使用Proxy对象重写了响应式系统，Proxy的性能本身就比definePropery好，同时Proxy能拦截属性的访问、赋值、删除等操作，不需要初始化时遍历所有的属性，如果存在多层属性嵌套的话，只有访问该属性时才会递归处理
- 可以监听动态新增的属性
- 可以监听删除的属性
- 可以监听数组的索引和length属性
- 编译优化
- Vue 2.x中模板首先需要编译成render函数，一般在构建的过程中完成， 在编译的过程中会编译静态根节点和静态节点，静态根节点要求节点中必须有一个静态子节点，当组件状态发生变化后，会通知watcher，触发wather的update，最终去执行虚拟dom的patch操作，遍历所有的虚拟节点找到差异，更新到真实DOM上，diff的过程中会比较整个虚拟dom，先对比新旧的div及其他的属性，然后再对比内部的子节点
- Vue 3.0中标记和提升所有的静态节点，diff的时候只需要对比动态节点内容，虚拟dom中diff的过程是最耗时的， 在Vue 2.x中，重新渲染时会重新创建新旧vnode，diff的时候会跳过静态根节点，对比每一个新旧vnode（即使这个节点什么都没做），Vue 3.0 通过标记和提升静态节点，以及patch flag 标记动态节点，大大提升了diff的性能
- Vue 3.0新引入了Fragments（注意使用3.0需要在vscode中升级vetur插件，否则vscode仍会提示报错），模板中不需要在创建一个唯一的根节点，可以直接放入文本内容或许多同级的标签
- 缓存事件处理函数，通过对事件处理函数的缓存避免了不必要的更新操作
- 源码体积优化
- 移除了一些不常用的API，比如inline-template、filter等
- 对Tree-shaking的支持更好
Vite
- Vite是一个面向现代浏览器的一个更轻更快的web应用开发工具（使用Rollup进行打包），有效解决了webpack在开发阶段使用webpack dev server冷启动时间过长（webpack在模块比较多的时候打包速度过慢，webpack会提前把所有模块打包，无论这个模块是否使用到，把打包结果存储在bundle（内存）中，然后才会启动web server ），webpack hmr热更新反应速度慢（vit只会立即编译当前修改的文件，而webpack会自动以这个文件为入口重新build一次，所有涉及到的依赖也都会呗加载一遍）的问题
- 采用webpack打包的原因
- 当初浏览器并不支持模块化
- 零散的模块文件会产生大量的http请求，当js文件比较多的时候，每个js文件都要发送一次请求，创建一个连接，打包后可以减少请求次数（这个问题http2已经解决，可以复用连接）
- 相较于Vue-cli创建的项目少了许多配置文件和依赖
- 基于ECMAScript标准原生模块系统（ES Modules）实现
ES Module
- 现代浏览器都支持ES Module (IE不支持)
- 通过type="module"加载模块
<script type="module" src=""></script>
- 支持模块的script默认是延迟加载的
- 类似于script设置defer属性
- 在文档解析完成后，在DOM树生成之后，
Vite和Vue-cli的区别
- Vite在开发模式下不需要打包，可以直接运行，因为在开发模式下，Vite使用浏览器原生支持的ESModule加载模块，因为不需要打开，所以开发模式下可以秒开页面，同时Vue会开启一个测试的服务器，会拦截服务器发送的请求，浏览器会向服务器发送请求，请求对应的模块，Vite会对浏览器不识别的模块进行处理，如.vue单文件组件，会在服务器上对文件进行编译，把编译的结果返回给服务器；Vue-cli开发模式下必须对项目打包才能运行
- Vite在生产环境下使用Rollup打包，
- 基于ES Module的方式打包，不需要使用babel把import转换成require以及相应的辅助函数，所以体积更小
- Vue-cli使用webpack打包
Vite特点
Vite创建项目
npm install vite-app <project-name>
- 基于模板创建项目(可以支持其他框架，后面跟上需要使用的框架)
npm init vite-app --template react
npm init vite-app --template preact
Vite项目依赖
- Vite（目前仅支持Vue3.0）
- @vue/compiler-sfc
Vue 3.0 响应式系统
- Proxy对象实现属性监听
- 多层属性嵌套，在访问属性过程中处理下一级属性
- 默认动态监听添加的属性
- 默认监听属性的删除操作
- 默认监听数组索引和length属性
- 可以作为单独模块使用
reactive函数
- 接受一个参数，判断该参数是否是对象（与ref不同，reactive只能把对象转换为响应式对象）
- 创建拦截器对象handler，设置get/set/deleteProperty
- 返回Proxy对象
