解决子组件复用数据视图不更新的问题

最近在用vue的时候遇到了一个问题,于是我写了一个简单的demo进行了测试,直接上图:

这是一个列表,列表中有三项,每项都是子组件,我的预期效果:点击第一项的“删除”按钮,就删除第一项,点击第二项的“删除”按钮,就删除第二项,以此类推。

然而......

我点击了第二项(内容为“22”)的删除按钮,希望能把该项删掉,结果发现页面上把最后一项删掉了,但是vue-devtools里的数据又确实按照预期改变了。

What??这是什么操作???

在这个demo中,我使用了子组件作为列表的每项,使用vuex做统一的状态管理,以下是我的代码:

App.vue:

<template>
   <div id="app">
      <ul>
        <li v-for="(value,key) in currentArray" class="list-item">
            <EditableField :content="value" @change="changeContent"></EditableField>
            <div class="action">
                <a href="javascript:;" @click="test(key)">删除</a>
            </div>
        </li>
     </ul>
    </div>  
</template>
<script>    
import store from './store/index'
import EditableField from './components/EditableField'
export default {
  name: 'App',
  components: {
    EditableField
  },
  store,
  data(){
    return {
        currentArray:this.$store.state.data.list
    }
  },
  methods:{
    changeContent(){
        console.log('内容改变了')
    },  
    test(index){
        console.log('删除:'+index)
        this.$store.commit('deleteItem',{name:'list',index:index})
    }
  }
}
</script>

./store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store=new Vuex.Store({
  state:{
    data:{
        list:[
            '11',
            '22',
            '33'
        ]
    }
  },
  mutations:{
    deleteItem(state,payload){
      let {name,index}=payload
      state['data'][name].splice(index,1)
    }
  }
})

export default store

./components/EditableField.vue

<template>
    <p contenteditable="true" @input="changeText"></p>
</template>
<script>
    export default{
        name:'EditableField',
        props:['content'],
        mounted:function () {
            this.$el.innerHTML=this.content
        },
        methods:{
            changeText(e){
                this.$emit('change',e.target.innerHTML)
            }
        }
    }
</script>
<style scoped>
    p{
        word-break: break-all;
    }
</style>

我刚开始想,是不是由于数组更新检测的问题,导致vue没有检测到数组的变化,因此没有同步到页面上?但是翻了vue关于数组更新检测的文档后,我发现我的写法并没有错。

正当我冥思苦想之际,我偶然发现,如果我不用子组件,结果就是对的:
App.vue:

<template>
   <div id="app">
      <ul>
        <li v-for="(value,key) in currentArray" class="list-item">
            <!---------------------------- 看这里!!!------------------------------>
            <p v-html="value" contenteditable="true" @input="changeContent"></p>    
            <!--<EditableField :content="value" @change="changeContent"></EditableField>-->
            <!----------------------------------------------------------------------->
            <div class="action">
                <a href="javascript:;" @click="test(key)">删除</a>
            </div>
        </li>
     </ul>
    </div>  
</template>

我现在删除第二项(内容为“22”),页面上和vue-devtools里的数据都符合预期。

所以问题应该是出在这个子组件的使用上。

翻看文档后,我发现了 “key” 这个特殊属性(文档里关于key的两处介绍:教程API文档),由此我们知道:

  1. 用v-for正在更新已渲染过的元素列表时,它默认采用“就地复用”策略,该模式是高效的,但是只适用于不依赖子组件或者临时DOM状态(例如:表单输入值)的列表渲染输出
  2. key的特殊属性主要用在Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes。如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key,它会基于key的变化重新排列列表元素顺序,并且会移除key不存在的元素。

由于我的列表的每一项都是子组件,所以显然我的列表依赖了子组件,所以应该在每一项加“key”,使上面提到的“就地复用”策略失效。于是现在只需要给数组中的每项添加一个唯一标识key就可以了。
App.vue:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store=new Vuex.Store({
  state:{
    data:{
        //-------------修改list---------------
        list:[    
            {
                key:'1',
                value:'11'
            },
            {
                key:'2',
                value:'22'
            },
            {
                key:'3',
                value:'33'
            }
        ]
        //---------------------------------------
    }
  },
  getters:{
    todos:state=>{
        return state.data.list
    }
  },
  mutations:{
    deleteItem(state,payload){
      let {name,index}=payload
      state.data.list.splice(index,1)
    }
  }
})

export default store

相应修改App.vue(在每项li上添加key):

<template>
    <div id="app">
        <ul>
        <li v-for="(value,key) in currentArray" class="list-item" :key="value.key">
            <EditableField :content="value.value" @change="changeContent"></EditableField>
            <div class="action">
                <a href="javascript:;" @click="test(key)">删除</a>
            </div>
        </li>
     </ul>
    </div>
</template>

结果正确。

至此,这个问题就解决了。

但是我由此有了另一个疑问:数据要怎样更新呢?既然子组件在有key的时候才更新,每条数据的key以数据的key作为唯一标识,如果数据的key不变,但是value改变了,这样子组件的数据依然不会更新。

带着这个疑问,我又进行了测试:

index.js:

const store=new Vuex.Store({
  state:{
    data:{
        list:[
            {
                key:'1',
                value:'11'
            },
            {
                key:'2',
                value:'22'
            },
            {
                key:'3',
                value:'33'
            }
        ]
    }
  },
  mutations:{
    editItem(state,payload){
      let {index}=payload
      let data={
               key:'2',
               value:'22aaaaaa'
      }
      //-----------修改key值为2的数据的value------------
      let tmp=state.data.list.find((i)=>i.key===data.key)  
      Object.assign(tmp,data)
    }
  }
})

结果如下:

这个结果是符合我们预期的:由于修改的数据的key值没有改变,该key值对应的数据也不会更新视图。

所以我们只需要在改变数据value的同时,改变它的key值:

index.js:

const store=new Vuex.Store({
  state:{
    data:{
        list:[
            {
                key:'1',
                value:'11'
            },
            {
                key:'2',
                value:'22'
            },
            {
                key:'3',
                value:'33'
            }
        ]
    }
  },
  mutations:{
    editItem(state,payload){
      let {index}=payload
      let data={
               key:'2',
               value:'22aaaaaa'
      }
      //-----------修改key值为2的数据的value------------
      let tmp=state.data.list.find((i)=>i.key===data.key)
      data.key='4'    //改变key值
      Object.assign(tmp,data);
    }
  }
})

结果:

注意几点:

  1. 在实际项目中,每条数据肯定有它的id或者code作为唯一标识,但是该标识不可直接设置为key的值(因为数据的id或者code不会改变);
  2. key要保证唯一性,可以设置它为自增的数字,或者结合日期时间设置随机字符串。
  3. 如果在列表循环的时候不使用子组件,则不会出现上述问题。

以上就是本篇博客的全部内容。每一次的踩坑都是进步,今天多踩一个坑,明天就能少踩一个坑,生命不息,填坑不止。

由于个人水平有限,博客错误之处,烦请指正!