【VUE3学习】Vue3与Vue2

关于Vue

（官方文档）Vuejs.org

（英文教程）learnVue

Vue 渐进式前端页面构建框架

Vue 的两个核心功能是

• 声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
• 响应性：Vue 会自动跟踪 JavaScript 状态变化并在改变发生时响应式地更新 DOM。

---

Vue版本

• Vue2 （主流）

  • 一般采用 vue-cli（内置webpack） + vue-router + VueX4.0

• Vue3 （官推）

  • ·一般采用 vite + vue-router + pinia

---

⭐UN-Vue2 和 Vue3 的区别

官网–Vue 2 和 Vue 3 之间的区别是什么？[常见问题 | Vue.js (vuejs.org)

vue2和vue3的区别有哪些 vue2和vue3的区别有哪些 - web开发 - 亿速云 (yisu.com)

（较深）Vue 3.0 新特性 预览_weixin_30595035的博客-CSDN博客

	Vue3	Vue2
双向数据绑定原理	ES6的API Proxy 代理	ES5的API Object.definePropert() 结合发布订阅者模式
	Virtual DOM 重构
	组合式Api / 选项式Api	选项式Api
	模板支持碎片节点 （被称为Fragment）	模板只能支持根节点模式
	创建阶段的生命周期合并为setup
	Teleport（独立于#app外挂载） / Suspense
	更好的TS支持
	等…… 待进一步了解更新
	以下为性能提升：
	Vue 3 提供了更小的包体积、更好的性能、更好的可扩展性和更好的 TypeScript/IDE 支持。
	与Vue2.x相比，mount 50%提升,内存占用小120%

---

拓展：关于 Vue2 双向数据绑定 的无法 检测 数组和对象的 变化

Vue 采用 Object.definePropert() 结合发布订阅者模式

vue2官网（问题及解决方案） 深入响应式原理 — Vue.js (vuejs.org)

无法 检测的情况如下：（vm是一个vue实例对象）

• 利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue

• 修改数组的长度时，例如：vm.items.length = newLength

• 通过 对象属性 property 的添加或移除

官网图示

对于数组

对于对象