修改数据页面不更新的原因和解决方案

​ 在Vue项目中，有时候在我们修改或者添加新的对象属性后，明明data中的数据已经更新了，但是页面依旧没有更新。

1、分析：

在vue2中是通过Object.defineProperty对于data中的数据进行数据劫持，实现数据的双向绑定的。

    defineReactive: function(data, key, val) {
        //为data中所有层次的属性都创建一个dep实例
        var dep = new Dep();
        //递归遍历data中所有层次的属性
        var childObj = observe(val);

        //为原有属性新增get和set方法(数据劫持)
        Object.defineProperty(data, key, {
            enumerable: true, // 可枚举
            configurable: false, // 不能再define
            get: function() {
                //判断当前Dep.target的watcher是否存在
                if (Dep.target) {//当模版初始化的时候会赋值watcher实例到target上
                    //调用dep的depend方法
                    dep.depend();
                }
                return val;
            },
            set: function(newVal) {
                if (newVal === val) {
                    return;
                }
                val = newVal;
                // 新的值是object的话，进行监听
                childObj = observe(newVal);
                // 通知订阅者
                dep.notify();
            }
        });
    }

解析：

通过Object.defineProperty对data中的数据进行数据劫持，组件在初始化的时候，对数据进行了递归遍历，让data中的每一个属性都拥有了get和set方法。但是在之后新加的数据中，并没有Object.defineProperty这个方法设置的响应式数据，至此修改后的视图并不能更新。

2、如何解决

在Vue中是不允许在已经创建的实例上动态添加新的根级响应式属性，但是我们可以通过这些方法，进行解决。

1. Vue.set()
2. Object.assign()
3. this.$forceUpdated()

第一种：

Vue.set()

通过Vue.set()的方法将响应式的方法嵌套在新增的对象上。

Vue.set(object, key, value)
/* 
   object：要修改的对象或者数组。
   key:属性或者下标，
   value：修改后的value值。
*/ 

第二种：

Object.assign()

方法用于对象的合并，将源对象的所有可枚举属性，复制到目标对象。

const  obj = Object.assign({},this.item,{newProperty:'新值'})

注意：

直接使用Object.assign()添加对象的新的属性是不会触发更新的。

第三种：

this.$forceUpdated()

通过this.$forceUpdated()对页面进行强制的刷新。

this.$forceUpdate();

拓展：

在Vue3中，Vue是通过Proxy实现数据的响应式的。

最后

以上就是忧伤香菇为你收集整理的修改数据页面不更新的原因和解决方案的全部内容，希望文章能够帮你解决修改数据页面不更新的原因和解决方案所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。