20240119收获

1.vue的路由按需导入组件的写法是

component:()=>import('@/xxxxxx')

此处是将import当作一个函数用，然后箭头函数不写大括号，相当于省略return和{}

2.原本我以为表单系列里的新建功能是不需要用到el-form-item的prop的，结果写的时候发现要添加表单校验功能，而这个功能必须要有prop，这下就明白了，而且目前据我所知之所以要prop的原因有：表单自带的重置功能使用的时候只会重置有prop的控件。

我还以为prop是特殊的属性，后来发现是我理解错了，prop是基于:model和:data的，也就是说这两个动态绑定的绑定对象，然后prop后面跟的依然是字符串，只不过是直接取的对应:model或者:data的，也就是说prop很多情况下是不需要写成user.username这样的，通常是

:model="user",然后其下的el-form-item身上prop="username"这样。

3.el-date-picker的样式有时候会有问题，因为有一个自己限制的宽度，有时候会导致显示的太窄了

解决办法

因为按照html关系，这个东西是在el-form-item的下面，所以

就根据控制台的class去设置就好了，不用穿透就能影响到他的宽。然后我去搜了下sass样式穿透的内容，没发现我想要的，然后我试了一下直接把那个class写到外面，结果居然也可以，后来我重新看了一下控制台的类名，发现了原因，因为像日期选择器这种，他的唯一性的那个属性选择器是跟在类选择器屁股后面的，也就是说如果我在当前页面去通过类选择器是能够直接拿到该元素的，而如果我再想去拿更内部的，才需要样式穿透，因此也就能解释为什么样式穿透的一个形式是父选择器 /deep/ 子选择器，因为父选择器 /deep/ 这是一个整体，后面才是我们要访问的元素相关的。

总结就是，如果没有组件嵌套，那就不需要样式穿透，如果有组件嵌套，且有scoped这个东西，那就要样式穿透，格式就是 父选择器 /deep/ 目标选择器。其实如果实在分不清，自己试试就好了，只要让样式生效，自己再回过头总结就行。

4.记得带上引号。

5.简单手机号的正则 /^1[3-9]\d{9}$/。

6.记得删除一些多余的属性，以防向后台传值的时候有多余的数据，如果后台接口严格校验参数个数，会不通过

7.delete 对象.属性

8.表单的正则校验，简单的正则用pattern，复杂的用validator，接受一个函数，这个函数有rule,value,callback三个参数，主要关注二三参数，第二个为传进来的值，第三个回调函数，如果成功，我们直接调用就好，如果失败，我们传入文字就好，用validator就可以省去写message的步骤。

9.路由跳转的另一种写法，这里的query，就是把信息添加到url上面。

代码错误

11.发现对于渲染时机的掌握不到位

这段代码在created的时候我去取id，然后报错

好像我关于created和router以及computed挂载的时机掌握的不清楚。

然后我去搜了下，有个哥们写的挺好的，原文如下

总结vue2基础面试_vue2 beforecreate 中可以用this吗-CSDN博客

更新一下这下面的错误，我上面报错的原因实际上是因为this.$router没有query这个属性，这个是在this.$route身上的，this.$route.query.id这样才对。相当于我误判了自己的错误，跑去研究了点生命周期的知识。

我主要从中受教的有一：created和mounted的区别，前者实际上是代码执行完了new Vue({

})，我这人，有时候别人叙述的东西，要么我得经历一些我才能明白，要么就按照我能理解的方式 来，我自己的理解方式是这样的，如图

created就是把这个main.js里的这个new Vue()给执行完了，于是就有this了

我经过他的启发，我决定自己测试一下。

如图，已经可以拿到这些$玩意了。所以，让我称呼的话，我会把created称为完成实例化钩子函数。

今天先休息吧，等21号看看vue源码，最近玩 无期迷途有点上头了

ps：这里小声但是真诚的建议，大家多整理思路，尝试按照自己的方法去理解，会有独属于你自己的感悟，我个人比较笨比较老实，我理解东西比较曲折，所以网上绝大部分知识包括我以前上学的教育经历都不适合我，我完全属于在不适合自己的教育环境下被折磨大的，现如今我终于有了可以自己去了解，认识，接触知识的机会了。但是我还是很感激所有的经历的。

12.要注意，虽然传参的时候，用的是router和query传的，但是取的时候得用route去取

这里稍微理解一下，要用url去取。

13.如果把编辑和新增写到一个页面里面，编辑的回显会有点点别扭,下图有错误。

async getCarCardDetail(){
      //回显数据
      const data = await getCarCardDetailAPI(this.id).data
      const {personName,phoneNumber,carNumber,carBrand,carInfoId} = data
      //改变指向
      this.carData = {personName,phoneNumber,carNumber,carBrand,carInfoId}
      const {cardStartDate,cardEndDate,paymentMethod,paymentAmount,rechargeId} = data 
      this.userData = {validate:[cardStartDate,cardEndDate],paymentMethod,paymentAmount,rechargeId}
      
    },

迷糊了，居然在await 后面加了.data,写顺手了，正确的应该如下，或者如下下

这样写也是可以的，经过测试了的，这样写主要为了印证我的想法，增长些自信心。我现在挺缺自信心的。

14.多选的列表，是给el-table-column添加type=”select“，添加一个type就可以了，然后监测选择事件则是绑定在el-table上的，注意，是绑定在表格本体上的，@selection-change事件

做删除功能的时候要注意到,下图有错误

会存在场景：最后一页只有一条数据，删除该数据后，如果还是查的最后一页，那么就取不到数据，所以要改变页码。同理，如果最后一页有两条数据，此时这两条数据都批量删除，那么也应该改变页码，这里我以为换页后批量选中的数据还会被保留，所以这里写成了<=，其实===就行了。而且脑子抽了，这个条件应该放到if的判断里面，应该如下图才对

15.批量的英文是batch