vue js动态赋值后视图层（HTML）或者组件没有重新渲染

vue js动态赋值后视图层（HTML）或者组件没有重新渲染

v-for更新数据不重新渲染页面

文章目录

• 前言
• 一、查找问题
• 二、解决方法
  • 1.强制刷新
  • 2.重新创建

前言

这个问题其实主要是要有一种解决问题的思路，通常做开发工作的都要有一种自己的思路，下面我会说一下我的解决方法。

一、查找问题

首先碰到这种问题你要知道是哪里出错了，下面为一些可能导致这个问题的原因：

1.数据渲染步骤问题

这个问题通常出现在页面刚进入的时候，大家知道vue有一个生命周期，通常我们页面初始化的数据都会在mounted（挂载后）调用，当然也会有一些在created（创建后）调用，这个没有什么对错，在mounted里面调用会对html和css的加载速度起到一定的帮助，但是也会出现一些问题，如果你页面中有一个子组件，需要你去调接口并传参那么在这里去调用就为时已晚了，以为子组件早已创建，所以最好在created里面调用为好。

2.代码逻辑问题

这个问题是很基本的，但是仍然会有很多人不会去排查自己写的代码当中到底哪里出错了，其实最简单的方法就是逐行去console.log一下，这样会快速定位到是哪一行出现了问题，然后盯着这一行的逻辑，去排查，比如说一些this指向性问题，或者闭包产生和for循环层级较多的各种问题都会导致赋值失败。

二、解决方法

1.强制刷新

当你检查问代码逻辑没有问题的时候，你首先可以在赋值之后强制刷新渲染页面一下，这种时候一般都是多层嵌套或者多层遍历导致的，这种方法只能在当前页面内起作用，如果你是给子组件赋值，就不行。

代码如下（示例）：

this.$forceUpdate()

2.重新销毁创建

如果只改变了子组件的数据，但是子组件没有重新渲染，那么可以重新创建一下这个子组件，其实也就是v-if一下。

代码如下（示例）：

this.show = false;//show 是组件的v-if
this.$nextTick(() => {
   this.show = true;
});

3.在原有对象上添加新的属性

在后端接口返回的对象中再添加一个新的属性，但是在添加属性过后。视图层却没有同步更新。

代码如下（示例）：

data(){
    return {
        demoList:[{name:'jack',age:15},{name:'Cyril',age:23}]    }
},
methods:{
    domeListData(){
        this.demoList[0].name = 'jacks';//改变在data种已定义的属性，试图会渲染
        this.demoList[0].weight= '60kg';//在原有对象上新加属性，试图不会渲染
    }
}

//解决方法
如上所述，既然我们新添加的属性没有得到vue的getter/setter转化，那么我们可以自己去主动转化我们所添加的新属性。 
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性(root-level reactive property)。
然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上： Vue.set(this.demolist[0], 'weight', '50kg') 
我们还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名： 
this.$set(this.demolist[0], 'weight', '50kg')

---