vue3学习教程 第一节 实现原理

1、介绍vue以及vue3

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任；
相较于其他流行MVVM框架，vue更轻量更便捷更易于上手，特别是对于国内的中文文档支持，

什么是MVVM （Model-View-ViewModel）架构

（1）、View 视图层，即UI设计的用户交互界面；
（2）、ViewModel 业务逻辑控制层，即js的业务处理；
（3）、Model 数据层，即对数据的增删改查的 处理；
如图：

详情请移步：vue 官网

2、vue3组合式API与vue2选项式API的异同

（1）、vue3中依然支持使用选项式API，但是切记不可选项式API与组合式API混用；
（2）、对于大型项目组合式API代码更清晰、更易于维护，而选项式API中，代码逻辑声明等相互交叉，代码可读性差，而且不利于后期维护；如下图

（3）、生命周期钩子函数不同

3、vue3新增加特性

3.1、重写双向数据绑定
vue2 依赖于JavaScript的数据劫持订阅实现，基于Object.defineProperty()实现；
1.1、通过 Object.defineProperty() 来劫持各个属性的setter、getter，在数据变化时候，发布消息给订阅者，从而触发相应的监听回调；
1.2、Object.defineProperty() 不具备监听数组的能力，需要重写数组的方法原型，从而达到监听数组；
1.3、Object.defineProperty() 无法监听到对象新添加或者删除的属性，需要通过 $set() 手动设置监听
1.4、vue 初始化时候会通过 Object.defineProperty() 对data(){}中的属性进行遍历，从而设置相应的getter/setter 属性，而达到响应式的结果
1.5、深度监听需要递归处理，故对性能影响比较大
1.6、Object.defineProperty() 每次只能监听一个属性，多个属性需要循环监听，浪费资源
1.7、Object.defineProperty() 无法监听处理map 、set中的属性改变响应式(new Map() / new Set())

<script>
const data = {
  msg: '测试'
}
Object.defineProperty(data, 'msg', {
  get() {
    return data.msg
  },
  set(value) {
    data.msg = value
  }
})
</script>

vue3 使用es6 新特性 proxy() 实现
2.1、 通过 ES6 的Proxy() 代理对象来处理属性的响应式
2.2、 基于Proxy() 和 Reflect()， 可以监听数组的增删改查，对于对象的新增删除属性同样有效；
2.3、 不需要一次遍历所有data属性，通过标记，只更新修改项，而不是全部对比；
2.4、 ES6新属性，部分浏览器不支持；
（3）、proxy(）相对于Object.defineProperty()的优势如下：

<script>
const person = {
  name: 'Andy'
}

let personProxy = new Proxy(person, {
  get(target, field) {
    // return target[field]
    return  Reflect.get(target, field)
  },
  set(target, field, value) {
    // target[field] = value
    Reflect.set(target, field, value)
  },
  deleteProperty(target, field) {
    // delete target[field]
    Reflect.deleteProperty(target, field)
  }
})
</script>

a、能监听动态新增的属性；
b、能监听删除的属性 ；
c、能监听数组的索引和 length 属性；
d、丢掉麻烦的备份数据
e、省去for in 循环
f、能监听数组变化
g、使代码更简化

3.2、优化DIFF算法
在Vue2中,每次更新diff,都是全量对比,Vue3则只对比带有标记的,这样大大减少了非动态内容的对比消耗
vue3 新增 补丁 path flag 标记，用于标记改动项；
patch flag 可以使，当你的 diff 算法走到 _createBlock 函数的时候，会忽略所有的静态节点，只对有标记的动态节点进行对比，而且在多层的嵌套下依然有效。

尽管 JavaScript 做 Vdom 的对比已经非常的快，但是 patch flag 的出现还是让 Vue3 的 Vdom 的性能得到了很大的提升，尤其是在针对大组件的时候。

原文链接：https://blog.csdn.net/qq1195566313/article/details/122768533

TEXT = 1 // 动态文本节点
CLASS=1<<1,1 // 2//动态class
STYLE=1<<2，// 4 //动态style
PROPS=1<<3,// 8 //动态属性，但不包含类名和样式
FULLPR0PS=1<<4,// 16 //具有动态key属性，当key改变时，需要进行完整的diff比较。
HYDRATE_ EVENTS = 1 << 5，// 32 //带有监听事件的节点
STABLE FRAGMENT = 1 << 6, // 64 //一个不会改变子节点顺序的fragment
KEYED_ FRAGMENT = 1 << 7, // 128 //带有key属性的fragment 或部分子字节有key
UNKEYED FRAGMENT = 1<< 8, // 256 //子节点没有key 的fragment
NEED PATCH = 1 << 9, // 512 //一个节点只会进行非props比较
DYNAMIC_SLOTS = 1 << 10 // 1024 // 动态slot
HOISTED = -1 // 静态节点
BALL = -2

3.3、多根节点、同时增加了 suspense teleport 以及多个v-model用法
3.4、tree shaking
用于剔除代码运行时候，没有使用代码，在保证代码正常运行时候，尽可能的去除无用代码，即在vue3中， 将全局api进行分块，如果不使用某些功能，则他们不会包含在基础包中，用以减少基础包体积；
3.5、组合式API