vue3 基础知识 01

加油！

---

一、vue3 带来的变化（源码）

1. 源码通过monorepo的形式来管理代码

   • Mono : 单个
   • Repo ：repository 仓库
   • 主要是将许多项目的代码存储在同一个 repository 中
   • 这样做的目的是多个包本身互相独立，可以有自己的功能逻辑，单元测试等；同时又可以在一个仓库下方便管理
   • 而且模块划分的更加清晰，可维护性、可扩展性更强

2. 源码使用TS来进行重写

   • 在 vue2中，vue 用 Flow 进行类型检测
   • 在 vue3中，vue 的源码全部用ts进行重构，并且vue 本身对 ts 支持也更好了

二、vue3 带来的变化（性能）

1. 使用 proxy 进行数据劫持

   • 在vue2中，使用object.defineProperty 来劫持数据的getter和setter方法
   • 但是在对对象属性进行删除和添加的是时候无法监听，无法劫持 (提供了$set 和 $delete
   • vue3开始用proxy来实现数据劫持

2. 删除了一些没必要的API

   • 移除了实例上的 $on $off $once
   • 移除了一些特性：filter , 内联模版等

3. 包括编译方面的优化

   • 生成 Block Tree、slot编译优化、diff 算法优化等

三、vue3 带来的变化（新的API）

1. 由 Options API 到Composition API

   • 在vue2中使用 options api 来描述对象，会有data,props，methods,computed ，生命周期等这些选项，存在比较大的问题就是多个逻辑不在同一个地方，代码的内聚性很差，比如：created 中会使用某个method 来修改data的数据
   • composition API 可以将相关的代码放到同一处进行处理，不要在多个Options 之间查找

2. Hook 函数增加代码的复用性

   • 在vue2 中通过mixins 在多个组件之间共享逻辑，因为mixins 由一大堆的options 组成，并且多个mixins 会存在命名冲突的问题
   • vue3 使用hook 将一部分独立逻辑抽取出来，而且还可以做到响应式

四、声明式 和 命令式

声明式更关注结果， 命令式更关注于过程

命令式

• 当我们想要完成一个操作的时候，需要通过一条js编写一个代码，作为给浏览器的指令，编写的过程就是 命令式编程

声明式

• 我们不关心过程，根据模板编写代码，官方帮助我们声明数据，声明方法，绑定数据

五、template

在vue 页面里我们经常看到这个标签，其实这个在js里也给我们提供了，使用template浏览器不会渲染，他是留给浏览器操作用的，当我们采用下载或者CDN 方式引入vue时，需要在使用这个标签的时会赋值一个id , 其实是 vue 通过queryselecter执行获取，使用这个好处就是：浏览器不会再渲染

六、data

data 属性需要传入一个函数，因为这里是为了 收集响应式数据，data 返回的对象 会被vue 的响应式系统劫持，之后对该对象修改或者访问进行处理

七、methods

他的属性是一个对象，在对象里定义很多方法，这些方法被绑定到template中
可以通过this关键字来直接访问到data中返回的对象属性
但是不能用箭头函数？