vue.js|vue开发搜索框防抖的优化和日常报错, javascript|前端

文章图片

组件的通信,父传子,监听的事件名写错,报错了找到组件找到名字后直接改正确后bug消失
防抖优化 1-不在使用手搓的写法去实现搜索框的防抖功能实现
2-下载lodashhttps://lodash.com/docs/4.17.15

控制台中使用任意一个命令 yarn add lodash npm i lodash

2-采用按需加载的方式, 有利于打包优化.不然引入的是全部的包

import { debounce } from "lodash"

3-在watch中监听使用这个函数

watch: { searchText: { // debounce 函数 // 参数1：一个函数 // 参数2：延迟时间，单位是毫秒 // 返回值：防抖之后的函数 //debounce(函数,时长)返回一个防抖函数 handler: debounce(function (value) { this.loadSearchSuggestions(value) }, 200),//单位是毫秒,自由设置 immediate: true // 该回调将会在侦听开始之后被立即调用 } },//handler只有监听的数据发生变化的时候才会执行 //这里不要使用箭头函数,在全局的时候严格模式下的箭头函数的指向undefined

路由传值的方式有哪几种
Vue-router传参可以分为两大类，分别是编程式的导航 router.push和声明式的导航
router.push
字符串：直接传递路由地址，但是不能传递参数
? this.$router.push("home")
【vue.js|vue开发搜索框防抖的优化和日常报错,】? 对象：
? 命名路由这种方式传递参数，目标页面刷新会报错 - name+params
? this.$router.push({name:"news",params:{userId:123})
? 查询参数和path配对的是query
? this.$router.push({path:"/news',query:{uersId:123})
? 接收参数 this.$route.query
声明式导航
? 字符串
? 命名路由
? 还可以to="/path/值" - 需要提前在路由规则里值 /path/:key
? 查询参数
? 还可以to="/path?key=value