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。


相关推荐
chilling heart7 分钟前
JAVA---集合ArrayList
java·开发语言
同志3271320 分钟前
用HTML+CSS做了一个网易云音乐客户端首页
前端·css
小猪欧巴哟21 分钟前
pnpm install 安装项目依赖遇到 illegal operation on a directory, symlink 问题
前端·vue.js
独角仙梦境22 分钟前
🚀🚀🚀学习这个思路,你也能手撸自己的专属vip脚手架🚀🚀🚀
前端
小_t_同学23 分钟前
C++之类和对象:构造函数,析构函数,拷贝构造,赋值运算符重载
开发语言·c++
CJWbiu25 分钟前
Github Action + docker 实现自动化部署
前端·自动化运维
关山25 分钟前
在TS中如何在子进程中动态实例化一个类
前端
吃瓜群众i26 分钟前
兼容IE8浏览器的8个实用知识点
前端·javascript
前端烨29 分钟前
vue3子传父——v-model辅助值传递
前端·vue3·组件传值
GSDjisidi32 分钟前
日本IT行业|salesforce开发语言占据的地位
开发语言·职场和发展