解决vue修改数据页面不重新渲染问题(Vue中数组和对象更改后视图不刷新)

最新推荐文章于 2024-09-05 19:16:10 发布

文鼎鼎

最新推荐文章于 2024-09-05 19:16:10 发布

阅读量1.1w

点赞数 8

分类专栏：问题文章标签： vue

本文链接：https://blog.csdn.net/killbee365/article/details/107632620

版权

本文探讨了Vue的渲染机制，指出Vue通过Object.defineProperty实现数据响应化。当对象属性或数组元素修改时，若未正确操作，可能会导致页面不刷新。文章列举了两种常见问题：修改对象属性和数组元素。对于对象，推荐使用Object.assign()添加属性；对于数组，应使用Vue提供的更新方法如push()、splice()等。当以上方法无效时，可以采用深拷贝或使用this.$forceUpdate()强制刷新。

摘要由CSDN通过智能技术生成

vue渲染机制和如何解决数据修改页面不刷新问题的多种方法

首先第一点，vue底层是将data对象传人，使用Object.definePropety,转换为getter和setter，所以，vue不支持IE8.

1.简单介绍一下Object.definePropety,

Object.defineProperty(obj, prop, descriptor)
//参数
obj
要在其上定义属性的对象。
prop
要定义或修改的属性的名称。
descriptor
将被定义或修改的属性描述符

  var obj = {}
  Object.defineProperty(obj, 'name', {
    get: function() {
      console.log('我的名字叫'+name);
      return name;
    },
    set: function(value) {
      console.log('你叫'+value)
      name = value;
    }
  });
    obj.name ='张三';//你叫张三
    obj.name//我的名字叫张三

从上述我们可以简单发现。当我们对这个对象的name属性赋值的时候，就会触发set方法，获取name属性的时候就会触发get方法；

2.因此在vue中写在data中的属性是是可以转换成getter和setter，换一句话就是响应式的，其他定义在data之外的数据，是无法响应的渲染，意思就是改变数据页面也不会刷新，所以一切要渲染到页面上的数据，必须写在data中，

不需要的，可以定义在this上