Vue2和Vue3响应式的基本实现

目录

  • 简介
  • [Vue2 响应式](#Vue2 响应式)
    • [Vue2 响应式的局限性](#Vue2 响应式的局限性)
  • [Vue3 响应式](#Vue3 响应式)
    • [Vue3 响应式的优点](#Vue3 响应式的优点)
  • [Vue2 和 Vue3 响应式对比](#Vue2 和 Vue3 响应式对比)

简介

在 Vue 框架中,数据的响应式是其核心特性之一。当页面数据发生变化时,我们希望界面能自动更新,而不是手动操作 DOM。这就需要对数据进行监听,并在数据变更时触发 UI 重新渲染。

Vue2 和 Vue3 在实现响应式的方式上有所不同,Vue2 主要依赖 Object.defineProperty,而 Vue3 则引入了 Proxy,大大优化了响应式系统的性能和灵活性。它们都是通过函数来封装响应式对象,方便读取或更新数据时能够进行其他的操作。

Vue2 响应式

Vue2 使用 Object.defineProperty 来拦截对象属性的访问和修改,从而实现响应式。

javascript 复制代码
const obj = {
  a: 1,
  b: 2,
  c: {
    x: 66,
    y: 2,
  }
}

function isObject(v) {
  return typeof v === 'object' && v !== null;
}

function observe(obj) {
  for (const k in obj) {
    let v = obj[k];
    if (isObject(v)) observe(v); // 递归遍历
    Object.defineProperty(obj, k, {
      get() {
        console.log(`读取${k}, 值${v}`);
        return v;
      },
      set(newVal) {
        v = newVal;
        console.log(`更新${k}, 值${v}`);
      }
    });
  }
}

observe(obj);

obj.a;
obj.a = 101;
obj.c.x;
obj.c.x = 166;

Vue2 响应式的局限性

  • 需要遍历对象的每个属性,性能较低。
  • 不能检测到新增或删除的属性。
  • 需要手动调用 Vue.set() 以确保新属性的响应式。

Vue3 响应式

Vue3 使用 Proxy 实现响应式,可以直接监听整个对象,而不是逐个属性。

javascript 复制代码
const obj = {
    a: 1,
    b: 2,
    c: {
        x: 1,
        y: 2,
    }
};

function isObject(v) {
    return typeof v === 'object' && v !== null;
}

function reactive(target) {
    return new Proxy(target, {
        get(target, k) {
            console.log(`读取: ${k}, 值: ${target[k]}`);
            // 读取时才递归生成代理
            if (isObject(target[k])) return reactive(target[k]);
            return target[k];
        },
        set(target, k, newVal) {
            if (newVal === target[k]) return;
            console.log(`更新: ${k}, 值${newVal}`);
            target[k] = newVal;
            return true;
        }
    });
}

const proxy = reactive(obj);

proxy.a;
proxy.a = 100;
proxy.c.x;

Vue3 响应式的优点

  • 直接监听整个对象,无需遍历所有属性。
  • 可以检测到属性的新增和删除。
  • 具有更好的性能和更简洁的代码结构。

Vue2 和 Vue3 响应式对比

对比项 Vue2 (Object.defineProperty) Vue3 (Proxy)
监听方式 逐个属性拦截 整个对象拦截
深度监听 需要递归处理 访问时自动代理
属性新增删除 需要 Vue.set() 处理 可直接监听
数组监听 需要重写数组方法 原生支持
性能 需要遍历所有属性,较低 直接代理整个对象,更高
兼容性 兼容性好,支持 ES5 及以上 需要 ES6 Proxy 支持

Vue3 通过 Proxy 解决了 Vue2 的许多缺陷,使得响应式系统更加高效、灵活和简洁。因此,Vue3 的响应式能力远超 Vue2。


相关推荐
Vitalia4 分钟前
从零开始学Rust:枚举(enum)与模式匹配核心机制
开发语言·后端·rust
双叶83631 分钟前
(C语言)虚数运算(结构体教程)(指针解法)(C语言教程)
c语言·开发语言·数据结构·c++·算法·microsoft
Yolo@~2 小时前
个人网站:基于html、css、js网页开发界面
javascript·css·html
斯~内克2 小时前
Electron 菜单系统深度解析:从基础到高级实践
前端·javascript·electron
一个public的class2 小时前
什么是 Java 泛型
java·开发语言·后端
士别三日&&当刮目相看2 小时前
JAVA学习*Object类
java·开发语言·学习
数据知道2 小时前
【YAML】一文掌握 YAML 的详细用法(YAML 备忘速查)
前端·yaml
清风絮柳2 小时前
51. “闲转易”交易平台小程序(基于springboot&vue)
vue.js·spring boot·小程序·毕业设计·校园二手交易平台·二手交易小程序·闲转易交易系统
dr李四维2 小时前
vue生命周期、钩子以及跨域问题简介
前端·javascript·vue.js·websocket·跨域问题·vue生命周期·钩子函数
invincible_Tang2 小时前
R格式 (15届B) 高精度
开发语言·算法·r语言