Vue数组改动疑惑？揭秘Vue.set神技，告别刷不出子组件困扰

跟你讲！听说过没，你有没有发现用vue改数组有时候子组件就是刷不出来？很困惑？别急，让我帮你解答一下这个问题～

  

    

      
{{ item }}
    
    Update Items
  


export default {
  data() {
    return {
      items: ["Apple", "Banana", "Cherry"]
    };
  },
  methods: {
    updateItems() {
      this.items = ["Grape", "Orange", "Pineapple"];
    }
  }
};

给你说Vue这个软件，平时处理数组绑定挺频繁的。但你要注意，你要是只改了个数组，那想让组件跟着变可不行。为啥呢?因为它主要通过JavaScript的setter方法来反应变化。就是这么回事儿，Vue只管你能不能直接在vue实例上改数据，别的不说，你偷偷摸摸改数组这件事儿，它可不操心。所以说，有时候Vue对非响应式数据的处理可能会让你感到蛋疼。

幸运的是，Vue有个好办法，Vue.set功能能帮我们解决问题！它可以在响应式对象中添加新的属性或往数组里添东西。比如说，我们只需要在这部分代码里面用Vue.set更新项目表的数组数值，先找到要编辑的数组，再告诉Vue插入的位置，然后输入你想要添加的信息就行了。这么做，即使我们改变了整个数组，也不用担心网页的视觉效果会受影响。

别忘了splice这个技巧，它能让JavaScript中元素随心所欲地插入和删除。在Vue中也常用来更新数组，网页页面会跟着改变。打个比方，比如要把”香蕉”换成”橙子”，splice就能搞定，随时随地替换都没问题，还不会留下任何痕迹。但是，用起来得看场景看你具体要达到什么效果！

  

    

      
{{ item }}
    
    Update Items
  


export default {
  data() {
    return {
      items: ["Apple", "Banana", "Cherry"]
    };
  },
  methods: {
    updateItems() {
      Vue.set(this.items, 1, "Orange");
    }
  }
};

赶紧学会这个超级有用的小技能用 filter 这个神奇工具就能解决！原数组有乱七八糟的东西嫌烦？放心，filter 能精准挑选出你要的部分，瞬间变身成全新的数组。比如这样，原来头大的问题，经过 filter 整理后，立马就只剩除了”香蕉”外的元素了。换上新数组后，页面立刻有反映！

接触过Vue的小伙伴可能都遇到过这样的情况，往数组里加数据，页面总是迟迟不更新，着实让人心烦意乱！但别担心，这其实是Vue故意设置的“花招”。放心，它已经为我们准备好了应对策略，像Vue.set、splice和filter这些功能都挺好用的，用对了效率翻番，代码也更清晰明了。所以，找到适合自己的方法真的很重要

  

    

      
{{ item }}
    
    Update Items
  


export default {
  data() {
    return {
      items: ["Apple", "Banana", "Cherry"]
    };
  },
  methods: {
    updateItems() {
      this.items.splice(1, 1, "Orange");
    }
  }
};

哥们儿，咱明白吗?简单的说就是，Vue里乱搞数组，组件就刷不上了。别着急有Vue的Vue.set, splice和filter帮咱们搞定更新，给视图刷新，编码也稳妥多了。今天老哥跟大家说说，在Vue给数组赋值时可能遇到哪些问题，以及如何解决。希望能给你点儿启示！不管哪里不懂或者想要讨论的话题都尽管说来；对了，点赞拐走，分享给你们的小伙伴也看看呀~