vue的使用经验

导读

这一次的口号是，带你重新认识vue，拯救1，2个前端开发者。

从2018年从事前端职业以来，呆过大小公司，干这一行都有2年多。代码写的多了，就越来越体会新手程序员都是挖坑的。在工作过程中，用一种方式去实现某个功能，等过了半年，大半年，自己成长起来了，哪天需求来了，回到该功能改代码。这是我自己的代码吗？当时是不是脑袋被门夹过，才想到用这个愚蠢的方法来实现，明明github上有一堆写好的功能或者ui框架上有类似的功能。用别人写好的比自己写的强多了，因为人家的经过多人参加编写实现，单元测试。三个臭皮匠胜过诸葛亮，总比一个人撸的强。

以前的那家小公司，有很多小项目，都是使用Vue或者jquery；目前这家公司，一个大web项目，也是Vue；Vue框架真是主流中的主流，国内占比大半。我有2年多的Vue项目经验吧，踩过一些坑，比如目前所在的公司的大项目有个支付方式的功能，大半年前我使用了很愚蠢的方法去实现，多花了7天的时间去写，就算是迭代，也要花不少的时间，这也是我从业以来给自己挖的最大的坑；还有在vue组件之间传参，相互调用函数因为不熟，写了很多的代码，走了不少弯路，现在看来，只好一笑：当时多蠢啊。哈哈。

你必须知道的几个vue技巧

1.组件

何谓组件，组件是代码复用，vue组件就是html，css，js的混合物，经典模式吧。组件有多重要？上一家公司我离职时，大佬说：你有时间的话多学习写组件吧，对你是好处。一时感动。面试时，有个面试官强调：我们这里要求前端有写组件能力，强调过程不5次。最近项目中，4个前端，我和其中一个习惯写组件，其他2个不写（应该是不会）。使用不写组件的那2位的代码，是需要到对应的页面找哪一行到哪一行，哪几个变量，复制几遍才过来，容易漏和出错。要是自己写的组件，或者别人写的，问一下，参数是做什么用的，如果使用，弄清楚使用就行。方便快捷。

写组件有个好处是，你可以定义变量数量少些，代码阅读性维护性高，我看到不写组件的那两位的代码，他们的页面data值数量都是20到30+，15+的methods，那天老大让我去搞这些页面，看到就头晕眼花，望码兴叹，流两行泪。

我第一次写的组件，请点击

2.传参

有组件的话，页面就相当于分成七大洲五大洋了。组件之间需要通信，相互联系起来，通信就是一个变量传到另外一个组件。一个组件包含另外一个组件，它们是父子关系。还有兄弟关系，祖孙关系的。等等。其实不要害怕，简单点分为2大类：父子关系和非父子关系。在vue里面通讯有多种方式： props(父传子)，emit（子传父），provide(inject)(父到子子孙孙的传，不建议多使用)，cookie(少使用)，vuex值（推荐，结合cookie使用）。

不能一味的使用同一种传参方式，按距离选择props和vuex的值。就好像现在这家公司web项目很大，我纯使用props和emit方式，结果一个参数从这个组件到最外面的组件，绕了一个半圈（最大嵌套层数是4）。每一次都要写同一个prop，烦死。后来使用了大佬灯介绍的一个方式vuex的值，省下不少代码。前者传参就是从这个村走到那个村，一直走到目的村，后者就是做地铁，嗖的一声，到了。我就想说，要不要这么省事，这样还要前端开发做什么？笑。父子组件近距离选择props和emit方式通信，非父子组件选择vuex的值。特别是那种嵌套几层的。这样子很省资源，对于代码的维护性阅读性是有帮助的。为啥，这个道理很简单，一个人站在你面前，你就应该开口和他沟通，女朋友在异地，微信或者电话沟通呗。反过来就是无厘头搞笑：可以想象，一个人就站在你面前，你却拿出手机打开微信和他说话，不是傻是什么。

3.调用函数

函数就是把几行代码弄到一块执行，干点事情。组件之间经常需要执行对方的方法。比如那大页面详情接口回来，我需要及时那详情接口的的某个字段作为参数调用地址选择器查询省市区的接口；或者说父组件的某个值改变了，子组件需要及时的做联动效果等。

跟参数类似的是，近距离使用refs和parents，远距离使用监听vuex的值的变化。refs是父组件执行子组件的方法，parents是子组件执行子组件的方法。尽量不要使用refs.resfs.refs或者parents.parents,parents，哪天网络不好什么的，会出问题的。近距离方法需要的参数都是现有的，直接塞就行。远距离可以使用computed， watch，vuex的值结合的方法，源组件设置Vuex的值，目标组件computed该Vuex值，然后watch该computed属性，有变化了就执行对应的方法干点什么。这两个方式实现起来，就可以吃掉大部分组件之间调用函数这类写代码需求，万试万灵，简单粗暴。

//源组件
this.$store.dispatch('xxx',  this.$store.getters.xxx++)

//目标组件
computed: {
    xxx(){
        return this.$store.getters.xxx;
    }
},
//或者computed的高级写法
computed: {
   ...mapGetters([
    'singer'
  ]),
}，
watch:{
    xxx(newV,oldV){
       //这里写干点什么
    }
}

4.结合ui的form表单渲染

这一部分很关键，是我从事前端行业一个很重要的经验。是所有前端开发者都需要重视的。记得之前有个技术大佬成哥说过，前端是什么，前端就是在页面上拿到字段值，作为参数塞给后台；拿到后台的值，渲染到页面上，这就是前端。vue拿值很简单，因为双向绑定，但是拿值前，需要校验，目的是提示引导用户输入正确的字段，给最好的体验；防止输入错误，非法，木马类似的字段值，确保安全。校验最好的方式不是手写，而是项目中使用的ui的form表单，那个才是最好的，它有写好的校验规则和支持自定义规则，程序员用几次就会。

form表单有多重要？列表查询的搜索调节框，详情页面的拒绝，通过，指派，删除理由弹框，保存，提交等，登录页面等等，都是可以用到form表单。看到前端同事，包括以前的我自己，使用手写的校验规则，实现起来难度是有的，花费的时间多2到3倍，因为改来改去都没法达到完善，总有1，2小问题，测试人员不让过的。纯手写检验规则的都是勇士。导读里面的xx方式功能，我就是踩了这样的坑。使用form里面的校验，那是小菜一碟。有一个误区是，常识是可以拿一个大对象给form表单赋值，然后从from表单取值为对象，数组可以不可以做这样的事情？其实是可以的。过程就是: 数组-->对象-->表单-->对象-->数组（适合ant-design，因为它的v-decorator会覆盖v-modal，elementUI里面v-modal与校验规则可以共存，可以不走这样的过程。）。

思路就是你要找个或者造个唯一标识给数组的每一项，用这个唯一标识作为对象的键名（也就是表单的每一项名字）；

//数组-->对象
let newObj;
this.payList.forEach((item,index)=>{
    if(!isNull(item.value)){
        newObj[item.唯一标识].value = item.value
    }

})

//=============
表单赋值，表单取值
//=============

//对象-->数组
for(var key in newObj ){
    this.payList.forEach((item,index)=>{
        if(!isNull(newObj[key]) && item.唯一标识== key){ //key相同就是对应的位置
            item.value = newObj[key];
        }
    })
}

这不是把后台需要的一维数组的value值活活的做了表单验证。二维数组也是一样，写2个循环而已。xx方式使用手写是因为我没有意识到这个知识点当时。再说，都不知道项目最终要做的是什么，需求改来改去经历2次大改1次小改。比起现在的实现方式，如果使用from表单的验证方式，可以减少500行的代码（大约500行逻辑判断）（验证和判断非法存在），意味着维护性大大提高，世界清静下来。难处是那个功能有插入别的同事写的功能代码，改起来需要时间，有可能会改出别的问题，项目组不一定能给我这个时间。

不喜欢form表单的样式，布局，自己去研究，去掉类名，或者自己手写样式，样式再怎么难是可以写出来的。大多数后台系统不是特别要求样式，反而输入框验证功能，测试人员喜欢找这里bug。

所以说，接触一个新ui时应该第一时间熟悉的表单组件，经常使用form表单的验证，哪怕对象，数组，二维数组，能用就用。没毛病。

5.混入mixin(组件的三分之一)

混入什么时候可以用？就是有多个组件，它们需要共同的vue属性：created,data,methods，computed等，就可以导入混入。混入就是组件的纯js版，三分之一。记得我搞5个表单页面的时候，他们样子字段大同小异，保存提审的调用方法一致，没有使用混入前，业务来需求了，一个改动需要在5个地方改，使用混入后，只需要改一次，因为一改就是原来的五改。大大提高代码的维护性。

6.computed计算属性与watch监听

computed是watch与data的加强混合体，在监听多个变量变化时及时修改目标变量值。经常放在v-if里面做条件判断。用好computed，可以写少几个data变量和几行逻辑代码。

watch是监听props，data，computed里面的值，有变化了，及时干点什么，通常是在本组件内使用，意思就是只能监听props，data。这是短距离监听。其实不然，结合vuex，和computed，可以监听vuex的值的变化，实现远距离监听，这下就爽了，可以做许多事情了，比如一个组件和另外一个组件距离很远，可以通信告诉它，我这边接口回来了，你可以搞点什么了。这个知识点和3.调用函数里面说的远距离调用函数是同一个东西。

computed: {
    xxx(){
        return this.$store.getters.xxx;
    }
},
watch:{
    xxx(newV,oldV){
       //这里写干点什么
    }
}

7.生命周期

组件是什么，是把一个个页面空间上分割成几块；生命周期就是对应的时间上，八大周期就是beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestrioy，destroyed，翻译过来就是创建，挂载，更新，销毁。生命周期好比一个人吧：他会出生，成年，整容，死亡。

一般在工作中会写个created，调用初始化变量的函数；mounted里面请求ajax；千万不要在updated里面改变一些用于渲染页面的变量或者数组，容易引发无限循环，页面会奔溃的，为啥，因为改变这类变量就是让页面update，你让vue在更新之后再去更新，这不没完没了了吗；beforeDestrioy是去用取消一些定时器和监听事件，释放内存，但我在工作中很少去做这个事，因为现在的手机电脑性能内存是足够好的，浏览器是客户端（一对一），做不做这个事影响挺小的。考虑性能的一般是后台工程师的事，服务器是一对多，后台工程师要考虑并发等一些因素。

8.一个或者多个同行的好友

三个臭皮匠胜过诸葛亮。有朋友就可以相互帮忙。在工作中，总会遇到各种问题，阻碍性或者奇葩性的。写代码的人都知道，有时候为了一个标点符号都是要找半到一小时。有个好友的话，他可以帮助你，你可以帮助他。公司新开一个web项目，选择Ui框架时，你就选择这个好友所在项目的框架，因为他那个项目拥有大多数你接下来遇到的问题的标准答案。

对vue的感悟

为什么vue会出来？我觉得是需求，是时代要求从业者快速写页面的结果。

如何快速的写页面，就是把页面拆分为多个部分，可以提供多个程序员一起写同一个页面，就算是同一个程序员写，还有代码复用的最大作用呢。页面拆分，代码复用的需求催生了组件。

组件之间不能独自单打独斗，需要通信起来团结起来，所有就有了vuex，props,refs,parents,emit，provide(inject)这些概念。

记得以前用jquery的时候，拿到后台数据后，根据这个数据拼接出很长的字符串，最后插入到页面对应的dom节点。这样做麻烦，需要写很多的代码。有个双向绑定的v-modal，v-if，v-for，这个事情就省下来的。不想拼很长的字符串这个需求产生了双向绑定。vue比jquery牛很多。

浏览网页的时候，刷新一个页面，需要等待那么一小会，页面空白闪一下，给用户不好的体验。所以vue的作者做了路由router，用户点击不同的按钮，页面就加载不同的组件。浏览器不需要重新渲染全部的内容，只需要渲染其中的部分，等待时间可以忽略。就有了单页面这个概念。React能不能做单页面啊，可以的，React里面也有router啊。

总的来说，组件+组件之间通信+双向绑定+单页面+其他一些忽略的概念 = vue。vue是写网页的工具而已。vue3.0官方文档出来了，不知道又会推出哪些好用快捷的功能。或者说，以后Vue不行了，需要学习别的框架，就拿组件，组件通信，双向绑定，路由等概念去套，对位上号的学习，理解起来不费吹灰之力。

最后，欢迎关注我的公众号。