从无到有浅聊Vue3的进步
重点：
- vue.js是什么
? 官网描述：vue是一套用于构建用户界面的渐进式框架，可以自底向上逐层应用，Vue 的核心库只关注视图层，数据和 DOM 已经被建立了关联，所有东西都是响应式的，几乎任意类型的应用界面都可以抽象为一个组件树。
- vue的优点
个人在查阅资料收集分为7点
1. 轻量级框架
概括一句话来描述：只关注视图层,是一个构建数据的视图集合，大小只有几十kb,
2. 简单易学
上手快，文档易懂
3. 数据双向绑定
? 通过MVVM思想实现数据的双向绑定，让开发者不用再操作dom对象。MVVM分别代表M(model),V（view）,VM(View-Model)即模型-视图-视图模型。老生常谈，**模型（Model）**指的是后端传递的数据。**视图(View)**指的是所看到的页面。**视图模型(ViewModel)**是mvvm模式的核心，它是连接view和model的桥梁。它的两个方向：一是将模型（Model）转化成视图(View)，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将视图(View)转化成模型(Model)，即将所看到的页面转化成后端的数据。
4. 组件化
? 一句话概括：先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑）。
5. 视图，数据，结构分离
分为两部，1.建立组建 2.消费组建 体现的效果为： 同一套逻辑，不同的展示方式。高效的复用组件
下面有篇博客代码实现
Vue开发组件如何将数据和视图分离
6.虚拟DOM
? 虚拟dom，首先了解其由来：假如我们的DOM操作不涉及到通信的话，我们大可以把DOM全部去除然后渲染一份完整的DOM树。总的来说，虚拟DOM就是为了提高页面渲染性能，是随着时代发展而诞生的产物。
? 解决方式是：通过状态生成一个虚拟节点树，然后使用虚拟节点树进行渲染。
? 引入虚拟DOM：只能监听到组件的变化，而组件的内部就使用虚拟DOM进行状态比对，也就是DIFF算法。
总结：
- 获取监听变化后生成的虚拟节点树
- 与上一次虚拟DOM节点树进行比较
- 找到差异的部分，渲染到真实的DOM节点上面
- 更新试图
7. 运行速度更快
- vue3的进步
1. 更好的支持TS类型推导
? 类型推导：通过已知的类型来推断另一个类型
2. Tree-shaking友好
? Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术.它依赖于 ES2015 模块系统中的静态结构特性，即进出口.例如 import和 export。
es6之前require动态按照条件引入
举个例子登入和注册
a(){
.....
}
export a
b(){
.....
}
export b
if(condition){
const a = require('a')
}else{
const b = require('b')
}
import完全静态，我们只能通过导入所有的包后再进行条件获取。如下：
export module ...
import aaa from "aaa";
import bbb from "bbb";
if (condition) {
aaa.xxxx
} else {
bbb.xxx
}
专业总结：因为tree shaking只能在静态modules下工作。ECMAScript 6 模块加载是静态的,因此整个依赖树可以被静态地推导出解析语法树。所以在 ES6 中使用 tree shaking 是非常容易的。对于vue3来说大部分引入model的形式
tree shaking比较经典的面试题下面这篇文章较详细的介绍了tree shaking及其工作原理小红书面试官：介绍一下 tree shaking 及其工作原理 - SegmentFault 思否
3. 代码更容易被压缩
- 路由懒加载：分割代码块
- 压缩请求资源
给大家拓展下面有vue项目的打包压缩实现
[Vue项目打包压缩的实现(让页面更快响应)](Vue项目打包压缩的实现(让页面更快响应)_vue.js_脚本之家 (jb51.net))
4.逻辑复用
逻辑复用有很多种方案
举例：
- mixins混入
- 高级组件的搭配
- 插槽
? 面试官一般谈到vue3哪些进步时之前会你会vue吗，此时的你说会或者精通，如果会问优点的这种简单的问题就一定要答上，不然真的org,大概率会问vue3哪些进步，重点在tree shaking，不仅要知道有这玩意，还需要知道怎么实现，这样才算是比较**认真**看了vue。
- 好文推荐
vue2基础总结和vue3新特性推荐：
vue基础总结2 - DAVENEE - 博客园 (cnblogs.com)
一文学会Vue3的新特性 - 知乎 (zhihu.com)
Vue3新特性一篇搞懂 (juejin.cn)
|