带搜索的vue列表页增加输入框回车搜索功能

后台管理系统有几个列表页，每个列表页都有查询搜索功能，列表页头部会有一个input输入框，就是目前需要在项目中所有列表页的输入框添加回车搜索功能，列表页的数据查询使用mixins中的函数和方法。要点：在mixins中添加监听事件，通过监听用户输入事件将其带入搜索代码：methods:{funkeyUp(e){if(e.key=="Enter"&&e.target._prevClass=="el-input__inner"){this.search()}},}search是一个封装的列表查询数据方法优化部分：由于每次切换到不同的页面，上一页的查询接口也会执行之后的接口请求在新页面的输入框中回车。这样不太好，频繁请求接口数据也对性能不利。开销，下面是去掉事件监听和启动事件监听的优化错误的）}）;},deactivated(){document.getElementById("avue-view").removeEventListener('keyup',this.funkeyUp,false)},原理：由于主页面app.vue的视图组件使用keep-alive，所以包裹的动态组件会被缓存，它是一个抽象组件，不会自己渲染一个dom元素，也不会出现在父组件链中。当组件在中切换时，其激活和去激活的生命周期钩子函数将相应执行。例如，包裹了两个组件：组件A和组件B。第一次切换到组件A时，组件A的created和activated生命周期函数都会被执行。这时候组件A的文字颜色就会通过点击事件发生变化。当切换到B组份时，A组份停用的寿命将被激活。循环功能将被触发；当切换回组件A时，会触发组件A激活的生命周期函数，但不会触发其创建的生命周期函数，组件A的文字颜色也是我们之前设置的。注意：activated()和deactivated()只有包裹在中才有效；