为什么 Vue2会出现数据更新视图不更新 Vue3不会出现

Vue2使用 Object.defineProperty 来进行数据劫持 实现响应式

Vue 3 使用Proxy对象来 实现响应式

Vue2使用 Object.defineProperty来进行数据劫持

  • Object.defineProperty在初始化实例时就会使用对数据进行响应式处理,且只会针对单个已定义的属性进行处理。

后添加的属性无法走到Object.defineProperty 这一步,所有无法更新视图

复制代码
var vm = new Vue({
    el: '#app',
    data: {
        user: {
            name: 'John'
        }
    }
});

直接添加新属性,添加age属性后,视图不会自动更新。

vm.user.age = 30

必须使用set(target,index,val)来改变数据和视图,但是在vue3中不存在set 。

当你直接通过索引修改数组元素时,Vue 2 无法检测到这种变化。

复制代码
var vm = new Vue({
    el: '#app',
    data: {
        items: ['a', 'b', 'c']
    }
});

通过索引修改数组元素

vm.items[1] = 'd';

视图也不会更新,因为 Vue 2 没有对这种操作进行响应式跟踪,

使用push、pop、splice $set(target,index,val)来改变数据和视图

Vue 3 使用Proxy对象来实现响应式。

Proxy可以代理整个对象

  • 它是对整个对象进行代理。
  • Proxyhandler对象中的拦截器方法(如getset)会在访问或修改目标对象的任何属性时被触发,不管这个属性是在代理之前就存在还是后来添加的。

添加新属性或修改属性时,只要被Proxy代理的,那么这些变化都能被检测到。

javascript 复制代码
import { reactive } from 'vue';
const state = reactive({
    user: {
        name: 'John'
    }
});

新增属性

state.user.age = 30;

视图会自动更新,

因为reactive函数利用Proxy创建了响应式对象,能够捕获对象属性的新增、删除和修改等操作。

Vue 3 对数组的变更检测也进行了优化

在 Vue 2 中推荐使用特定的数组变异方法(如push、pop、splice等)来触发视图更新,

但在 Vue 3 中,通过Proxy的特性,即使是直接修改数组元素(例如通过索引修改)也能被正确检测到,从而更新视图。

相关推荐
小光学长6 分钟前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH16 分钟前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
麦麦大数据1 小时前
D027 v2 vue+django+neo4j 基于知识图谱红楼梦问答系统 (新增问关系功能;新增知识节点和关系管理功能,neo4j增删改查功能)
vue.js·django·问答系统·知识图谱·neo4j·图谱管理·neo4j增删改查
专注前端30年2 小时前
【JavaScript】reduce 方法的详解与实战
开发语言·前端·javascript
菜鸟una3 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
专注前端30年3 小时前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
Highcharts.js3 小时前
选择合适的组合:如何打造数据可视化的“黄金组合”
javascript·信息可视化·highcharts·交互式图表开发
angelQ4 小时前
Vue 3 中 ref 获取 scrollHeight 属性为 undefined 问题定位
前端·javascript
我的div丢了肿么办4 小时前
js函数声明和函数表达式的理解
前端·javascript·vue.js
AAA阿giao5 小时前
JavaScript 对象字面量与代理模式:用“胡巴送花”讲透面向对象与设计思想
javascript