关于前端:vue带搜索的列表页新增输入框回车搜索功能

5次阅读

共计 1004 个字符，预计需要花费 3 分钟才能阅读完成。

后盾管理系统有若干个列表页，每个列表页都带有查问搜寻性能，列表页的头部会有 input 输入框，目前须要将我的项目中所有列表页的输入框都减少回车搜寻性能，列表页的数据查问都应用到了 mixins 外面的性能办法

**
代码：**

  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> 包裹的时候才无效；

正文完