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

后台管理系统有若干个列表页，每个列表页都带有查询搜索功能，列表页的头部会有input输入框，目前需要将项目中所有列表页的输入框都增加回车搜索功能，列表页的数据查询都使用到了mixins里面的功能方法

要点：在mixins里面新增监听事件，通过监听用户enter事件，将其带入搜索

代码：

  methods: {
        funkeyUp(e) {
            if (e.key == "Enter" && e.target._prevClass == "el-input__inner") {
                this.search()
            }
        },
}

search是封装好的列表查询数据方法
优化部分：由于每次切换不同页面时候，会将前一个页面的查询接口在新页面输入框回车后同样执行接口请求，这种不太好，而且频繁请求接口数据也对性能有开销，下面是移除事件监听和启动事件监听的优化

  activated() {

        this.$nextTick(() => {
            document.getElementById("avue-view").addEventListener('keyup', this.funkeyUp, false)
        });
    },
    deactivated() {
       
        document.getElementById("avue-view").removeEventListener('keyup', this.funkeyUp, false)
    },

原理：
由于主页面app.vue的视图组件使用了keep-alive，<keep-alive>包裹的动态组件会被缓存，它是一个抽象组件，它自身不会渲染一个dom元素，也不会出现在父组件链中。当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

如<keep-alive>包裹两个组件：组件A和组件B。当第一次切换到组件A时，组件A的created和activated生命周期函数都会被执行，这时通过点击事件改变组件A的文字的颜色，在切换到组件B，这时组件A的deactivated的生命周期函数会被触发；在切换回组件A，组件A的activated生命周期函数会被触发，但是它的created生命周期函数不会被触发了，而且A组件的文字颜色也是我们之前设置过的。

注意：activated()和deactivated()只有在<keep-alive></keep-alive>包裹的时候才有效；