vue开发搜索框防抖的优化和日常报错,

组件的通信,父传子,监听的事件名写错,报错了 找到组件 找到名字后直接改正确后bug消失

防抖优化

1-不在使用手搓的写法去实现搜索框的防抖功能实现

2-下载  lodash        https://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")

​ 对象：

​ 命名路由 这种方式传递参数，目标页面刷新会报错 - 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