Vuejs建议和最佳实践

想要更好的阅读体验，请直接移步个人原文出处吧：www.pilishen.com/posts/vuejs…

仍是个Vue新手？没怎么开始学？

若是你彻底是个Vue新手，那么这篇文章极可能不会给你带来太多益处，由于你得有些Vue的基础才能理解文中所说的。若是你还没学会vue，建议你看看咱们的这个课程《Laravel&Vue深度整合实战第二版》，可让你从彻底的vue零基础，成长为能知足平常开发大部分须要的vue高手，既有vue相关的初中高级知识，还有vue和laravel结合的方式，期间咱们开发了多个实战效果案例。

话很少说，看看有哪些建议吧~

（一）安装上VueDevtools

能够说，搞Vue开发，没有VueDevtools是不可行的。它是个火狐和chrome浏览器里的扩展，装了它，就能够给你的vue开发带来不尽的便利，很少说，用这个连接去装吧~//github.com/vuejs/vue-devtools

这个的使用，咱们在课程《Laravel&Vue深度整合实战第二版》已经演示和说了。

（二）安装上VuePerformanceDevtool（vue性能开发工具）

这个Chrome扩展可让你检测vue组件的性能，也是一个很是有用的工具，能够经过这个连接安装：//chrome.google.com/webstore/detail/vue-performance-devtool/koljilikekcjfeecjefimopfffhkjbne

安装好了，你得在代码里加上这么一句，才能启用它：

Vue.config.performance = true;
复制代码

记得要将其加在new Vue实例以前，固然了，这样的话，你生产环境上也就开启这个工具了，这每每不是咱们想要的，你能够基于环境监测来决定是否开启这个，能够用下面的代码实现：

Vue.config.performance = process.env.NODE_ENV !== 'production'
复制代码

（三）组件间通讯

vue里面组件间的通讯有好几种形式。你可使用props从上到下地往组件里传递数据，这是一种单向的沟通：

<my-component :firstProp="someValue"></my-component>
复制代码

若是你想着在子组件里通知父组件，告诉它某些事情发生了，或某个值发生了变化，能够用子组件发送事件的方式：

...
export default {
    methods: {
        onClick() {
            this.$emit('nameOfEvent', someValue);
        }
    }
}
复制代码

而后你就能够在父级组件里，对这个事件的发生作相应监听和处理：

<my-component :firstProp="someValue" @nameOfEvent=”doSomething”></my-component>
复制代码

这里的$emit(）发送事件的方法，只能用在parent/child，也即父级和子级组件之间的通讯。

若是你想着实现更复杂的组件间通讯，好比两个子级组件之间，不经过父级，如何实现通讯呢？这个时候你就可使用EventBus或者Vuex。EventBus在小中型的应用里，基本上就够用了，若是你并无特别复杂的组件间状态管理的话。关于EventBus，能够看看以前咱们给你们写的文章：《使用Vue.js建立全局事件总线（Global Event Bus ）》

固然了，不管是props属性传递，仍是父子组件事件监听，仍是EventBus复杂通讯处理，这些呢，在咱们的课程《Laravel&Vue深度整合实战第二版》也都给你们讲解和演示了。

（四）使用VueX来作复杂的状态管理

咱们说过EventBus模式处理小中型项目够用了，由于它简单直接，但若是你肯定要作一个大中型的项目，你的前端应用里有较多数据处理，有不少贯穿整个应用的状态须要共享或处理，那么这个时候，就通常要使用VueX了。

学习和使用VueX的建议：

• 去学一下VueX里的state, getters, mutations and actions这些分别是啥
• 研究一下Vuex modules，建议若是用VueX，就最好上来就用上VueX modules，若是你以为VueX modules繁琐、不值得，那么可能你的应用也没复杂到非得用VueX的地步
• 学一下如何建立出好的结构，由于VueX默认并无给你任何限制
• 学一下“strict”模式是如何运做的
• 能够多参考一下这个Vuex Cheatsheet ：//github.com/vuejs-tips/vuex-cheatsheet

（五）代码切割效果

现现在，性能是个热门话题，随着你应用愈来愈大、愈来愈复杂，咱们得让其越快越好。尽量地实现代码切割效果，这样能够极大减少你主要的bundle或app文件的体积，于是能提升你应用的初始化时间。

const Loader = () => import(/* webpackChunkName: "aChunkName" */'../path/to/component.vue');
复制代码

能够像这样来动态引入你的组件，须要的时候再去加载，而不是一会儿都加载上，关于代码切割的具体实现及原理，能够看咱们《Laravel&Vue深度整合实战第二版》这个课程的扩展文章，也即《在Laravel Mix里使用动态引入来实现Code Splitting效果》

（六）组件注册的简单方式

传统上，咱们喜欢这样来注册vue组件：

import MyAwesomeComponent from './my-awesome-component.vue';
...
components: {
    'my-awesome-component': MyAwesomeComponent
}
复制代码

这没啥错，但你也能够更简洁一些：

...
components: {
    MyAwesomeComponent,
    MyAwesomeComponentTwo,
    MyAwesomeComponentThree
}
复制代码

（七）避免将全部组件都注册为全局组件

只有一些基本的组件，你在应用里处处用到，才应该被注册为全局组件，好比说一些Buttons/Inputs组件。

特定功能的组件，能够引入到其余的组件里，同时能够的话用上动态引入，这样可让你的bundle文件小一些，性能更好一些，这块能够多参考前面的代码切割建议和文章。

（八）验证props属性

{id="Validateprops"}

当往一个组件里传参时，你最好是立马就进行一些验证，若是没有验证，没有声明一个props应该是个什么类型(String, Array, Object……)，那么尤为是你团队里其余调用你组件的人，他们就不知道该传个啥了，包括你本身，当数据类型发生变化或错误时，你也没有个很好的错误提示了。

这一点在咱们《Laravel&Vue深度整合实战第二版》课程里，也给你们重点强调和演示了。

（九）VueRouter

若是你是要作个单页应用（spa），纯前端逻辑的话，那么极可能你会须要用到客户端方面的路由，须要在不一样组件之间跳来跳去，这个时候就能够用上VueRouter，它是vue官方的路由组件。

用起来很简单，官方文档在这里//router.vuejs.org/

（十）url变了，但视图没有更新

当在一个SPA里时，你极可能会想着在视图里重复利用一些组件。假设你如今在一个博客文章页面上，而后你想从那个页面跳到另外一篇文章上，你会指望相应的内容也改为新的文章的内容，但它却没有变化。

这每每是复用同一个组件的结果，vue仍是用了以前的一个实例，这时候组件里this.$route是变了，可是相应的那些生命周期事件，好比created(), beforeMounted() 和 mounted()，它们就没有被从新触发。

这个问题，通常有两种解决办法：

要强制vue建立一个新的组件实例，能够在<router-view>设置一个unique key：

<router-view :key="$route.fullPath">
复制代码

或者你也能够设置个watch函数，当route路由变了的时候，就触发相应逻辑：

watch: {
    "$route.params.somevalue": {
        handler(somevalue) {
            // do stuff
        },
        immediate: true
    }
}
复制代码

（十一）表单数据验证

当前端有表单时，咱们可能会想着在前台页面直接加上验证，这样能够免去非得先日后端验证一下，固然这不是说你后端就不验证了，双重的验证还是必要的，只是这样可让前端体验更好更直接一些。

固然了，你不必本身去处理前端验证的提示和逻辑，已经有这方面很好的组件了，能够试试 Vuelidate 或 VeeValidate，两个都不错，均可以帮你节省很多时间

（十二）好好理解一下vue的生命周期

要想真正发挥出vue的强大，就极其建议你好好理解vue的生命周期。

比方说，若是你想在beforeCreated()下去获取data里的一个值，那么就确定获取不到；或者，你想在created()里去获取一个ref元素，那么你也获取不到，由于这个时候尚未加载DOM元素呢。

关于vue的生命周期，咱们在《Laravel&Vue深度整合实战第二版》里也作了重点讲解，重点阐释和演示了平常开发中的几个最重要的周期函数，固然若是你想了解全部的周期，能够看看下面这个完整的图：

（十三）避免直接修改DOM

使用Vue的一个首要原则就是，你不能直接去操做和修改DOM元素，这也是咱们用一个像Vue这样的前端框架的目的，就再也不像原生js或jquery里那样了。

固然了，你能够用$refs来进行相关操做，这是更简洁更符合vue的方式的作法，这样也更容易往后维护，由于这样你就不须要依赖有着某个特定class或id的元素了。

固然了，这一点，在咱们《Laravel&Vue深度整合实战第二版》也有详细演示。

（十四）进行数据交互

开发中，不免咱们须要跟一些外部的服务沟通，来获取或发送数据，好比咱们的后端API。

那么最简单的，你能够用浏览器自带的fetch()方法来获取数据，固然这个不必定全部浏览器都支持。

此外呢，建议使用axios组件来作各类数据访问和交互，它在vue和react社区里极其受欢迎，这一点，咱们《Laravel&Vue深度整合实战第二版》也都详细演示了如何用axios向后台发送get、post、patch、delete等请求。

（十五）列表遍历

vue里面能够用v-for很方便地进行列表遍历：

<div v-for="item in items" v-bind:key="item.id">
   <!-- content --> 
</div>
复制代码

当你的v-for是用来循环输出一个简单的array时，其中的:key是能够不用指定的，但当你的v-for是用在一个组件上时，也即循环输出某个组件的内容和逻辑时，就必须得加上:key，这样的话，当你列出来的某一个组件逻辑发生变化时，vue才知道到底要去更新列表里的哪个，因此这个:key就至关因而列表元素的一个辨识符。固然了，你也能够无论v-for的逻辑是否复杂，是不是用在子组件上，你默认都带上:key。

（十六）计算属性和方法

当你想对vue实例里已有的data数据进行进一步处理时，就能够用计算属性，它的另外一个好处是性能有保证，由于计算属性的结果是会被缓存的，只要它所依赖的数据不变，它 就不用来回去计算，不用每次都计算一下。

data:{
    names: ["Leonardo", "Donatello", "Rafael", "Michaelangelo"]
},
computed:{
	//返回名字以D开头的球星
    startsWithD(){
        return this.names.filter(name => name.startsWith("D"))
    }
}

<p v-for="(name, index) in startsWithD" :key="index">{{name}}</p>
复制代码

若是你有个很复杂的计算属性，那么最好的作法时，将其拆分红多个简单的计算属性，这样更容易测试、维护和阅读。

而一个方法，能够理解成是绑定到vue实例上的一个函数，它只有当你明确调用它的时候才执行，就跟一个普通的js或PHP里的方法同样。

methods:{
    startWithCharacter(char){
        return this.names.filter(name => name.startsWith(char))
    }
}
复制代码

关于方法与计算属性的差异，何时该用计算属性，何时该用方法，这个咱们在《Laravel&Vue深度整合实战第二版》里有更详细的阐释和使用。

（十七）学习和使用mixins

当咱们开发应用时，常常会遇到一些功能和逻辑，须要在不一样的组件间屡次使用，好比一样的方法逻辑，两个组件都要用到，但咱们又不想也不该该彻底复制两遍，这个时候就该用mixins了。

这意味着，若是我建立了一个组件，它有X个不一样的方法、周期逻辑、本地的状态等，我想复用它们，我就能够建立个mixins，让其余的组件扩展这个mixins，就能够在这些新的组件里使用本来它们没有的方法了。

关于mixins的更多信息，能够看看官方文档：//vuejs.org/v2/guide/mixins.html

（十八）用上vue自带的修饰符

在不一样的场景下，vue有一系列不一样的修饰符能够用，建议你们能够大概看看，在一些场景下用起来仍是比较方便的。

这里呢，并不对它们具体展开，由于都比较简单，你们能够直接看文档便可。

表单修饰符（//cn.vuejs.org/v2/guide/forms.html#%E4%BF%AE%E9%A5%B0%E7%AC%A6）

• .lazy
• .number
• .trim

事件修饰符（//cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6）

本来咱们常常须要用event.preventDefault()来阻止提交按钮或点击事件的默认动做，可是有了vue的事件修饰符，咱们就能够在绑定事件时加上个.stop来阻止单击事件继续传递，用.prevent来阻止表单提交的默认刷新，很是方便，固然还有更多相似的。

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

按键修饰符，能够很方便地监听一些按键事件，文档地址跟上面的事件修饰符是一个

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

（十九）好的系统布局和架构

Vue没有给你提供任何默认的系统布局或架构，除非好比说你用Nuxt之类的基于Vue的框架。

因此怎么组织你的应用结构，就取决于你本身了，取决于你的团队了，大家怎么样协商出一个好的、易于理解的应用结构，让全部的团队成员能更好地开展协做。

若是你是个私人的小项目，你可能不须要太在乎这点，但若是大家是一个大中型的团队项目，那么这一点，将对大家极其重要，一个好的、有意义的系统结构，可让大家的平常开发事半功倍、相互不牵扯。

这一点上，能够多借鉴后端应用和框架的通行作法，好比模块化，将本来单个的、相互牵扯的应用，开发成一个一个独立的模块，各个模块间相互不影响，只经过有限的途径进行沟通；也能够借鉴后端比较流行的微服务架构，将本来一个庞大的系统，拆分红多个微服务，它们彻底独立、不相干，甚至不一样的部分均可以用不一样的语言、不一样的框架。这些作法或趋势，也正在被逐步实践到前端框架和项目当中，在大型项目开始前，能将这个设计好，将会为大家的开发奠基良好长远的基础。

（二十）作好必要的清理工做

当你在开发一个SPA应用时，若是你不留意去移除一些自定义的事件、实例、intervals等，就可能致使应用的内存占用愈来愈多，最终变得缓慢甚至没法响应。

能够是像相似这个样子：

created() {
  refreshUserLoginTokenInterval(); //开启一个interval来刷新token
},
beforeDestroy () {
  destroyUserLoginInterval(); //在组件销毁前，要记得移除这个interval
}
复制代码

（二十一）往一个元素上添加多个class

添加一个class是很简单的：

//当isError是true时，就加上red这个class
<div :class=”{'red': isError}”></div>
复制代码

可是怎么样添加多个class呢？其实也很简单

// 相应属性为true时，就添加相应class
<div :class="{'red': isError, 'text-bold': isActive }”></div> 复制代码

固然了，当添加多个class时，你也可使用计算属性来实现。

（二十二）结语

固然了，vue相关的建议和好的实践，真要写下去，可能永远写不完，这只是一些相对重要的、平常中常常遇到的一些建议。

若是你尚未开始学习vue，或者仍是一个vue新手，或者看了不少资料，就是感受不得vue的章法，那么极其建议你入手咱们《Laravel&Vue深度整合实战第二版》这一课程，能够看到，这些最佳建议的大部分，咱们课程里都已经重点讲解和演示了，无论你是零基础，仍是稍微有点基础，用咱们这个课程均可以让你最短期里最好地掌握vue，让vue成为你平常开发中爱不释手的技术栈。

末了，欢迎到个人站点https://www.pilishen.com/来作客哦，也欢迎加入咱们的公开群【公开课@pilishen.com】：109256050，等你哦~