这几天开发遇到一个这样的问题:在vue实例已经创建好了的时候,当我们再向data里面的数组或对象加入属性时,发现数据不更新到视图上面。
举例说明一下,
<div>
<ul>
<li>{
{ info.name }}</li>
<li>{
{ info.age }}</li>
<li>{
{ info.hobby }}</li>
</ul>
</div>
data() {
return {
info: {
name:'lily',
age:23,
hobby:'draw'
}
}
},
页面呈现的效果:(css样式可以自己调整)
现在我们有个需求:mounted函数接收到后端接口后发现缺少所需的变量,那么需要我们前端手动添加。如果我们用 arrary.变量名 或者 arrary["变量名"] 的方式添加,会发现不生效(其实数据已经加入到info中了,但是并没有更新到视图上)。此时我们就需要使用 this.$set()。
这是因为data中的数据是响应式的,我们也需要让添加的元素是响应式的(可以触发视图)
this.$set()使用方法:this.$set(object,obj,value)
object:要更改的数组或者对象;obj:要添加或者更改的属性(也可以是下标);value:属性的值
还有一些函数也是可以更新视图的,例如pop、push、shift、unshift、splice、sort、reverse这些。