背景
再项目开发过程中经常遇到给data里面声明的变量,动态的赋值时,值发生了变化,但是视图并没有更新;
以下是官方文档中的叙述:
当一个 Vue 实例被创建时,它将 data 对象中的 所有的属性 加入到 Vue 的响应式系统中。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。
当这些数据改变时,视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性 才是响应式的。也就是说如果你添加一个新的属性,比如:vm.b = 'hi',那么对 b 的改动将不会触发任何视图的更新;
问题简述
1、如果你知道你会在晚些时候需要一个属性,但是一开始它为空或不存在,那么你仅需要设置一些初始值,这样后续赋值的时候即可跟踪到;例如:
data:{
id: '',
name: '',
age: ''
}
2、不知道自己需要什么属性,所有的值都是动态赋予的(后面的解决方案,主要针对此问题);
解决思路
查看vue的官方文档,我们发现它提供了Vue.set( target, propertyName/index, value )方法
(网址:https://cn.vuejs.org/v2/api/#Vue-set)
用法:
向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性,例如:this.obj.s = 'hello',这种是不会触发视图更新的
此时使用:
this.$set(目标变量,属性,属性值);
举例:
data: {
obj: {}
}
methods: {
init () {
// 给obj添加了一个name的属性,它的值是'zhangsan'
this.$set(this.obj, 'name', 'zhangsan')
}
}
综述
1、已知属性时,设置默认值保证视图更新;
2、属性未知时,使用Vue.set(),进行动态赋值,更新视图