踩坑的问题

  这周在完成一个功能之后，回过头去看自己的代码竟然发现自己有点看不懂了，也才完成一周不到的时间。看不懂的原因也很简单，父组件有一个对象数组，传递给其中一个子组件，然后会对组件中的对象修改，而修改的操作是这个子组件的兄弟组件去完成的，修改完成之后会将修改后的结果返回给父组件，然而子组件中的数据也相应的修改了，不明白其原因。想了一会儿才关联到可能是跟浅拷贝有关。

// 父组件
<template lang="html">
    <div class="parent">
        <eldest-son :arr="arr"></eldest-son>
        <younger-son :arrItem="arrItem" @data-changed="dataChanged"></younger-son>
    </div>
</template>
<script lang="ts">
    public arr: Person[] = [
        {
            name: 'bob',
            age: 18,
        }, {
            name: 'jack',
            age: 14,
        },
    ];
    public arrItem: Person = arr[0];

    public dataChanged(newPerson: Person): void {
        this.arrItem = newPerson;
    }

</script>

  问题差不多就是这样，更恰好的是当时的功能正好是这样的需求，就是要修改eldest-son中的数据。写完之后去看觉得通过数据渲染的框架，对待数据会严谨很多，第一时间并没有往浅拷贝上去想这个问题，看了一会儿之后发现是对数组进行操作的，才联想到浅拷贝。

  在JavaScript中，深、浅拷贝问题只针对复杂对象，array和object。关于深浅拷贝之前已经看过一些文章了，也是一个很简单的问题，就不再赘诉深浅拷贝的原理和实现了，有很多优秀的文章。而恰好我这里的需求就是要通过浅拷贝这种方式实现，不然在子组件中修改后的数据还要通过父组件中转一下。

  通过这个小问题，再次让我意识到注释的重要性，即使是自己一个人开发项目。有时候解决问题的想法可能是在一瞬间得到的灵感，写完之后虽然觉得实现的简单，如果不加上注释，后面再看代码的时候可能很难想到，就要花更多的时间去读。所以，还是得写一篇文章来警示下自己，有些东西对于自己再简单，尽可能的在实现功能后加上注释，方便别人也方便自己阅读。

  另外联想到的就是，遇到的一些小问题一定要记录一下，特别是自己做过的一些东西，如果不记一下很快就忘掉了，下次遇到的时候还会再犯错，是很不值得的一件事。现在已经有一点习惯，会在自己遇到一些问题的时候，会用网易云笔记记录下来，希望能继续保持这样的态度。

  最后感觉自己读书和看文档的专注度不够，只看到了皮毛，学会了使用，在使用的过程中还会踩坑。我觉得这样也并不是一件坏事，但这提醒了我，看完一定要尝试一下，及时发现不足，然后弥补。现在感觉好像好些书我都得再读一遍啊…