vue3-介绍

介绍

---

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

MVVM (Model-View-ViewModel)

• Model: 数据层（存储数据及对数据的处理如增删改查）
• View: 视图层（UI 用户界面）
• ViewModel: 业务逻辑层（一切js可视为业务逻辑）

vue2 对比 vue3

---

vue2: 逻辑比较分散、维护性差、可读性差

vue3: 逻辑分明、可维护性高

vue3新特性介绍

---

1. 重写双向绑定

• 不用备份数据
• 不用全量for in 循环
• 可以监听数组变化
• 代码简化
• 可以监听动态新增的属性
• 可以监听删除的属性
• 可以监听数组的索引和length 属性

Object.defineProperty

vue2 Object.defineProperty来实现监听数据的改变和读取（属性中的getter和setter方法） 实现数据劫持。

defineProperty：可以直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

Object.defineProperty(obj, prop, descriptor) obj: 需要操作的对象 prop: 需要操作的属性 descriptor: 属性描述

// 例如: 给obj对象动态新增一个name属性, 并且name属性的取值必须是xxx
let obj = {};
Object.defineProperty(obj, 'name', {
    value: 'xxx', // 新增的属性的取值
    writable: true, // 默认情况下新增的属性的取值不能修改
    configurable: true,  // 默认情况下新增的属性不能删除的
    enumerable: true // 默认情况下新增的属性不能迭代
});
console.log(obj);

defineProperty get/set方法

通过defineProperty给某个属性添加了get/set方法,那么以后只要获取这个属性的值就会自动调用get, 设置这个属性的值就会自动调用set。如果设置了get/set方法, 那么就不能通过value直接赋值, 也不能编写writable:true

    let obj = {};
    let oldValue = '李白';
    Object.defineProperty(obj, 'name', {
        configurable: true,
        enumerable: true,
        get(){
            console.log("get is executed");
            return oldValue;
        },
        set(newValue){
            if(oldValue !== newValue){
                console.log("set is executed");
                oldValue = newValue;
            }
        }
    });
    
    obj.name = 'xxx';
    console.log(obj.name);

2. 优化VDOM算法

vue2 每次更新diff，都是全量对比 vue3 vdom 做静态标记，对比标记，（patch flag），只对有标记的节点进行对比，嵌套也一样，性能得到很大的提升

3. Fragment 多个根节点

多个跟节点、render JSX 如同react jsx

4. Tree shaking

将全局的API 分块，如果没有用到的API 就不会打包，减少体积

5. Composition API

函数式变成 vue hook