Vue 数据已更新 但是页面并没有重新被渲染

问题描述

当一个对象在初始化时并没有定义某个属性时，改变该动态新增属性的值并不会重新渲染页面v-model绑定的数据。（该对象的属性值本身发生了变化，但是页面不会被重新渲染）

原因

当动态增加的属性值发生改变时，使用直接赋值的形式并不会引起Vue的自动渲染机制。

因为使用直接赋值的形式并不会为该属性生成getter与setter方法，因此当该属性的值发生变化时，vue.js并不能监听，导致页面不能被重新渲染。

解决办法

该问题的解决办法有三种：

解决办法①：在该对象初始化时便为其定义该属性。

//示例一：
//① 初始化时： 
queryParam: { name: '' }
//② 改变该对象的name属性时可以直接赋值修改
this.queryParam.name = '小明'
//此时在页面与v-model绑定的queryParam.name栏位将可以实时的被重新渲染

解决办法②：使用this.$set(Object对象,  key属性, value值 )

//示例二：
//① 初始化时
queryParam: {}
//② 改变该对象未被初始化的属性时使用this.$set
this.$set(this.queryParam, name, '小明')
//此时在页面与v-model绑定的queryParam.name栏位将可以实时的被重新渲染

解决办法③：使用强制刷新 this.$forceUpdate()

//示例三：
//① 初始化时 
queryParam: { }
//② 改变该对象的未被初始化的属性时直接赋值修改
this.queryParam.name = '小明'
//③ 使用this.$forceUpdate()进行强制刷新
this.$forceUpdate()
//此时在页面与v-model绑定的queryParam.name栏位将可以实时的被重新渲染