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

最近在用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文档），由此我们知道：

用v-for正在更新已渲染过的元素列表时，它默认采用“就地复用”策略，该模式是高效的，但是只适用于不依赖子组件或者临时DOM状态（例如：表单输入值）的列表渲染输出。
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);
    }
  }
})

结果：

注意几点：

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

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

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