来源：Vue3 + vite + Ts + pinia + 实战 + 源码 +electron

Vue

  • Vue是一套用于构建用户界面的渐进式框架

  • Vue的优点

    • 自底向上逐层运用
    • 只关注视图层，易上手
    • 易与第三方库或现有项目整合
    • 能驱动复杂的单页面项目

  • Vue是MVVM（Model-View-ViewModel）架构

    • View：视图层（UI用户界面）
    • ViewModel：业务逻辑层（一切JS可视为业务逻辑）
    • Model：数据层（存储数据、对数据的处理）

MVVM架构

Vue2 vs Vue3

  • 声明式API（Options API）写的比较分散，Vue2的写法
  • 组合式API（Composition API）可以把连贯的逻辑写在一起，或者封装成hook

声明式API & 组合式API

Vue3新特性

重写双向数据绑定

Vue2

基于Object.defineProperty()实现

  • 需要使用一个备份对象

  • 需要for in循环，才能给原对象每个属性都加响应式

  • 无法监听数组变化，需要重写数组方法才能实现响应式（但实现的不完全）

  • 代码复杂

  • 原数据新增的属性不带响应式

  • 原数据删除属性时不删除对应响应式

  • 无法处理索引和length属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    const obj = {property: 114514}
    const _obj = {}

    Object.defineProperty(_obj, 'property', {
        get() {
            console.log('有人读取property属性了')
            return property in obj? obj.property: 0
        },
        set(value) {
           	console.log('有人修改property属性了，且值是'+value)
            obj.property = value
        }
    })

Vue3

基于Proxy实现（ES6新增）

  • 丢掉麻烦的备份数据

  • 省去for in循环

  • 监听数组变化

  • 代码简化

  • 监听动态新增的属性

  • 监听删除的属性

  • 监听数据的索引和length属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    let proxyObj = new Proxy(obj, {
    	get: function(target, property) {
            console.log('有人读取property属性了')
    		return prop in target? target[prop]: 0
    	},
    	set: function(target, property, value) {
            console.log('有人修改property属性了，且值是'+value)
    		target[prop] = value
    	}
    })

VDOM性能瓶颈的解决

  • Vue2中，每次更新diff都是全量对比

  • Vue3中只对比带有标记的，减少了非动态内容的对比消耗（能感受diff优化的工具）

    diff的优化

支持Fragments

文档碎片Fragments，表示一个没有父级文件的最小文档对象，被视作轻量版Document。

它不是真实DOM树的一部分，变化不触发DOM重绘、不导致性能问题。

Fragments主要解决DOM元素的插入问题，例如：需插入多个节点时，先创建一个Fragment，把节点依次添加到Fragment上，再把Fragment添加到页面Document上，这样只会产生一次重绘；而如果直接把DOM节点依次添加到Document，就会引发多次重绘。

  • Vue2：Template中只能有一个父节点，其他节点要被包在里面
  • Vue3：Template里可以有多个节点，并支持了tsx和jsx写法（类似react），还新增了Suspense和teleport两个内置组件，和多v-model用法

支持Tree-shaking

Tree-shaking：代码运行结果保持不变的前提下，去掉无用代码。

  • Vue2：无论使用什么功能，最终都会出现在生产代码中，Vue实例在项目中是单例的，捆绑程序无法检测到该对象的哪些属性在代码中被使用到
  • Vue3：将全局API进行分块，如果不使用某些功能，就不会被包含在基础包中（不会被打包）

新增Composition API

在此基础上还有Setup语法糖式编程