vue2-VS-vue3数组

我是槑槑

于 2020-08-20 06:24:07 发布

阅读量1.1k

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/weixin_42132044/article/details/108115273

版权

Vue 专栏收录该内容

19 篇文章

订阅专栏

本文对比了Vue2和Vue3在处理数组时的不同，Vue2可以直接通过下标进行添加或修改，而在Vue3中，使用下标同样可以实现数组更新并触发视图响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue2版本

直接根据下标添加或者修改数组

  <div id="app">
    <ul>
      <li v-for='item in list'>{{item}}</li>
    </ul>
    <button @click=addObj>点我添加</button>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
  <script>
    const vm = new Vue({
      el:'#app',
      data:{
        list:['css','html','js']
      },
      methods :{
        addObj() {
          // let idx = this.list.length
          // this.list[idx] = 'vue' 无法响应到视图
          this.list.push('vue')
        }
      }
    })
  </script>

vue3版本

根据下标可以修改数组并响应视图

 <script src="https://libs.cdnjs.net/vue/3.0.0-rc.5/vue.global.js"></script>
  <script>
    const { createApp } = Vue
    const app = createApp({
      data(){
        return{
          list:['css','html','js']
        }
      },
      methods :{
        addObj() {
          let idx = this.list.length
          this.list[idx] = 'vue' 
        }
      }
    }).mount('#app')
  </script>