很多伙伴在自己用vue学习开发的过程中，不像真正的工作开发，有后端支持，可以从后端那里调接口拿到真实的数据进行展示。但为了模拟这个过程，我们经常使用自己在本地编写模拟的数据进行使用，然后通过发送ajax请求得到我们本地的数据。
这次，超人鸭就使用本地编写的json数据，通过axios发送ajax请求，来获取本地数据，然后实现搜索功能，并在这个功能上加以拓展，实现搜索关键字的高亮。
- 我们一步一步来，首先使用axios
axios是现在vue官方推荐使用一个插件，用来发送http请求，如果只是简单的调用接口，那用法也非常简单。
上面是axios的基础用法，下面也会看到具体的使用
- 然后编写我们的json数据
因为是本地的模拟数据，所以推荐放在项目中static文件夹里面，下面是超人鸭本次编写的json文件device.json,大家可以不用关心数据本身有什么含义，看一下json数据的编写格式
这就写好一个json文件，我们来看看在组件中如何通过axios调用到这个json文件:
- 回到这次的主题，实现搜索且关键字高亮
- 现在简单的html结构和data里面的变量:
- 我们先实现搜索功能，高亮下一步再实现
- 因为是本地的模拟数据，所以采用最原始的方式，去遍历判断筛选。 这样就完成了搜索功能，接下来超人鸭来实现关键字高亮
注意到上面我放的html结构吗，里面展示数据用的不是平常的插值表达式，也就是两个大括号，而是用v-html，可以用来展示html代码的而不是简单的字符串。
说到这，那实现高亮的思路就是将关键字也就是你输入的内容，在每一条数据中替换成html字符串 - 接上上面的代码，还是在search方法里面
将每一个字段都进行一次处理，来实现关键字高亮的效果。
-备注 如果是搜索两个关键字，按空格区分的话
- 回到我们的例子中,为什么例子会出现对象的浅拷贝呢?
我们的原始数据，也就是从json文件中的获取到的数据，赋值给我们组件中data的deviceList，而这个过程，只执行了一次，也就是说deviceList这个原始数组在之后的执行中都没有重新去获取。然后在点击搜索后遍历匹配的过程中，resultList去push
deviceList中的某一项，而deviceList的每一项都是一个对象，而这些过程都是对象的浅拷贝，所以在之后的高亮处理中，改变了某一个对象里面的属性，deviceList也会跟着受影响。 - 如何解决
如果在真正与后端配合开发的过程中，每次点击搜索，都会再去调用一次接口，重新获取数据。那我们也模拟这个过程，每次点击搜索时都重新去获取数据，保证每次原始数据deviceList都是新的。这个实现也非常简单，不要在created中用axios调用json文件，而是search方法一开始调用:
看起来似乎没问题了？
熟悉axios插件的伙伴都知道，axios是用promise封装的，而promise是用来处理异步操作的。异步就是不能确定它什么时候能执行完的操作，所以这样写的话，不能确定它是什么时候执行完成，所以不能确定deviceList什么时候才能获取到数据，当方法继续往后走而deviceList 没有数据就会报错。
- 正确的写法应该在获取数据成功后，才去执行下面的操作，也就是获取数据成功后的回调函数里，
到这里就完成了，确保了每次都是获取新的数据而且在获取数据成功后才执行下一步操作。实现了用模拟数据进行搜索，关键字高亮的效果。下面超人鸭放上完整代码，不足的地方请大家多多指教。