game | 一叶凉夏

Tic Tac Toe项目总结

1.v-for使用报错：

Cannot use v-for on stateful component root element because it renders multiple elements.

不能在根元素（root element）使用 v-for，因为v-for是个循环体呈现多个元素，v-for在根元素上导致无法渲染。

==使用v-for的时候需要在外层加上一个div不能让他处在根元素上==

正确示例：

<template id="block1">
        <div class="body">
            <div class="box1" v-for="item in total_stats1" @click="">{{item.id}}</div>
        </div>
</template>

错误示例：

1
2
3

<template id="block1">
            <div class="box1" v-for="item in total_stats1" @click="">{{item.id}}</div
</template>

2.本次设计思路：

刚开始是想到通过定义一个子组件，这个组件的模板是一个div，作为一个小网格
然后在子组件data属性中定义一个数组，里面存放了当前小网格里面的信息（id：用来标识表格，clickState：点击状态，其实这个属性没用到，可以删除，player：用来标识玩家）
接着将信息数组通过v-for循环与小网格进行绑定，这时候出现了一个问题，就是，如果你直接循环个9次，那么css就不好设计，因为如果你用浮动左对齐的话，那么九个网格全都会浮动到一行来，所以需要每3个网格给他套一个div，这样他才能实现3×3的网格，但是如何实现呢
- 一种是双重循环，我v-for都还不熟，双循环构思了好一会，也没确定要怎么实现，果断就放弃了
- 另一种就是没一行就设置一个子组件，相当于总共是3个子组件，这个虽然可以解决当前的问题，但是缺陷也是显而易见，他们并不在一个组件中，所以数据之间不好交换处理，所以我想到了使用父子组件交互，对子组件的点击事件进行监听，点击后，将子组件的信息传输到父组件中（毕竟父亲就一个，就可以实现对事件的集中处理）
然后就是对父组件中的逻辑设计了，父组件中data里面塞一个跟子组件中一模一样的数组，用来接收子组件传过来的数据，子组件的发射事件中，我发送了两个参数（其实一个就行了）一个是（item.id）一个是（item），之所以是两个，是因为我当时没准备传item，就是准备接受item的id，实现记录网格的点击状态，并且冻结网格的操作
接下来就是把传过来的数据塞进父组件中，我是用了一个for循环，遍历childstats数组，找到与传进来的id相同的那一项，将他的点击状态改成 “已点击”，同时设置它的玩家（玩家的设计思路是：通过 ‘有效’ 点击次数来判断玩家，之所以是’有效’，是因为我当时看那个示例，感觉那玩意不是一个button，是一个div，我就按照div写了，我当时还想着div怎么给他冻结。结果就通过点击状态和点击次数来实现了，’有效’点击的设计是通过判断他的）
父组件对数组进行遍历，筛选出玩家1和2的行走路线，将其与lines数组进行比较，如果有符合的，那么就弹窗输出结果，游戏结束。

3.代码优化：

使用三个组件这个操作是下下策，父子组件交互强行增大了游戏逻辑得到复杂性，同时维护更新难度也会相应的加大。（不过初学Vue连带着父子组件交互也直接掌握了也是意外收获）
新版本的对代码的重写，将三个组件通过双重循环，改为了一个组件，这样就完成了之前把数据处理全部由子组件完成的愿想。
逐步实现了新加入功能：悔棋与记录下棋路线，实现时间回溯。我自己的思路是点击一次，将其点击记录记录到history数组中，这个history的内容与一个button绑定，通过点击按钮，实现时间回溯
button中的click事件传入了当前的索引值，然后通过索引值，对在当前索引值后面的history数组中的对象的player属性进行清空，这样就可以实现时间回溯。
后续学到了通过ES6中的各种牛逼的方法进行代码的简化，将一大坨代码精简成两三行代码，美观实用，而且逻辑清晰（善用，擅用方法！）