vue数组和对象的更新问题

注意：Vue 不允许在已经创建的实例上动态添加新的根级响应式属性(root-level reactive property)

数组不能检测数据变化情况

<script>
 var vm = new Vue({
          
   
     el:"#app",
     data:{
          
   
         scores:[80,70,50,60]
     },
     methods:{
          
   
         updataScore(){
          
   
             // 失败的情况1：通过索引index修改值
             this.scores[0] = 90
             // 成功1：
             this.$set(this.scores, 0, 90)
             // 成功2：
             this.score.splice(0, 1, 90)
             
             // 失败的情况2：修改数据的长度
             this.scores.length = 3
             // 成功
             this.scores.splice(3)
         }
     }
 })

对象不能检测数据变化情况

Vue不能检测到对象属性的添加和删除

<script>
 var vm = new Vue({
          
   
     el:"#app",
     data:{
          
   
         teacher:{
          
   
             name:李四
         }
     },
     methods:{
          
   
         updataTeacherInfo(){
          
   
             // 失败的情况1：为data中的某一个对象添加一个属性
			this.teacher.age = 28
             // 成功1：
             this.$set(this.teacher, age, 28)
             // 成功2：
             this.student = Object.assign({
          
   }, this.teacher, {
          
   age:28,})
             // 错误示范2
             Object.assign(this.teacher, {
          
   age:28,}
                           
             // 失败情况2：删除某一属性
             delete this.teacher.name
             // 成功1：
             this.$delete(this.teacher, "name")              
         }
     }
 })