Vue数组push操作无效求助：无法向fruits数组添加新元素

嘿，我一眼就看到问题所在了——你创建Vue实例的时候，没有把它赋值给vue变量，后面调用vue.fruits.push()其实是在操作一个不存在的对象，难怪数组没变化！

修正步骤 #

只需要把Vue实例保存到变量里，再通过这个变量操作数组就行：

// 把实例赋值给vue变量，这样后面才能访问到它
const vue = new Vue({
  el:'#app',
  data:{
    fruits:[
      {name:'apple'},
      {name:'banana'},
      {name:'orange'}
    ]
  }
})

// 现在执行push，数组和视图都会更新啦
vue.fruits.push({name:'pear'});

背后的原因 #

Vue的响应式系统会自动监听data中数组的变更方法（比如push、splice、shift这些），但前提是你得通过Vue实例去访问这个数组。如果实例没被正确引用，你的push操作根本碰不到Vue管理的那个响应式数组，自然不会触发视图更新。

额外提醒 #

如果是在Vue组件内部操作数据，直接用this.fruits.push()就可以了，不需要额外的全局变量。但你这里是全局创建实例，所以把实例存到变量里是正确的做法。

内容的提问来源于stack exchange，提问作者Carlos