① vue数据改变页面不刷新

如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

<div id="app">
  {{score}}
  <div @click="changeScore">{{namelist}}</div>
</div>

data: {
    return {
        score:{
            chinese:100,
            english:20,
            math:149
        },
        namelist:['laoxie','dingding','luoluo']
    }    
},
methods: {
　　changeScore() { 
　　　　this.score.chinese = 150;//不更新视图
　　}
}

• 因为 Vue 无法探测实例属性上新增的 property，故页面不更新视图。

Vue官方文档提供了两种方法：Vue.set(target,key,val) 和 this.$set(target,key,val)

• 区别：Vue.set() 可以设置实例创建之后添加的属性，而this.$set() 只能设置实例创建后存在的属性

data: {
    return {
        score:{
            chinese:100,
            english:20,
            math:149
        },
        namelist:['laoxie','dingding','luoluo']
    }    
},
methods: {
　　changeScore() { 
　　　　// this.score.chinese = 150;//不更新视图
      // this.$set(this.score,chinese,150)
      Vue.set(this.score,chinese,150)
　　}
}

• target对象不能是vue实例，或者Vue实例的根数据对象

Vue.set(this.score,'wuli',123)
Vue.set(this,'wuli',123);//错误

附：

1 如何设置响应式属性？

第一种：初始化时写入data属性

第二种：Vue.set(target,key,val) | 实例对象.$set( )

• target对象不能是vue实例，或者Vue实例的根数据对象

第三种：数值变异方法

• push()
• unshift()
• pop()
• shift()
• splice()
• sort()
• reverse()