解决搜索历史关键词前后顺序以及关键词重复的问题

一.解决搜索历史关键字前后顺序的问题：

1. data中的 historyList 属性，不做任何修改，依然使用push进行末尾追加；

2. 定义一个计算属性history，将 historyList 数组 reverse 反转之后，就是此计算属性的值；

   computed：{
       history () {
           //由于数组是引用数据类型，所以不要基于原数组调用reverse方法，以免修改原数组中元素的顺序
           //应该新建一个内存无关的数组，再进行reverse反转
           return [...this.historyList].reverse()
       }
   }

3.页面中渲染搜索关键词的时候，不在使用 historyList ，而是使用计算属性 history 。

二.解决搜索历史关键词重复的问题：

1.注释掉push操作

2.将Array数组转化为 Set对象

const set = new Set(this.historyList)

3.调用 Set 对象的 delete 和 add 方法

set.delete(this.kw)

set.add(this.kw) //先删除后增加确保了当前被搜索的排在第一位

4.将 Set 对象转化为 Array 数组

this.historyList = Array.from(set)

// Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组，也是ES6的新增方法