关闭

Vue最佳实践

时间: 2019-09-02阅读: 1173标签: vue

vue 最佳实践,是参考 Vue 官方风格指南并根据过去 Vue 实际项目开发中的经验总结的一套规范建议。本项目的目的是希望每个 Vue 开发者都能尽快熟悉并上手项目代码,志在帮助 Vue 新手开发者及时避免一些不规范的设计和由此而引发的问题。本建议如有不妥之处,敬请指正!非常欢迎有志同道合的开发者贡献更多、更好的建议。

小弟先开个头,大佬们一起可好!项目地址:Vue 最佳实践


组件目录内始终使用文件夹管理组件

在 components 目录下的通用组件始终使用文件夹管理组件,并通过 index.js 暴露组件,建议使用以下文件结构:

├── components
│   ├── componentA
│   │   ├── componentA.vue
│   │   └── index.js
│   ├── componentB
│   │   ├── componentA.vue
│   │   └── index.js
│   ├── index.js


开启路由懒加载

vue 路由懒加载其实依赖于 webpack 的 code-spliting 以及 vue 的异步组件,关于 vue 的异步组件可以看动态组件 & 异步组件,而异步组依赖动态 import。


模块化路由配置

在中大型项目中,会有很多的页面或模块,常出现路由嵌套的情况。此时,建议以路由层级进行模块拆分。文件结构如下:

├── router
│   ├── index.js
│   ├── home.js
│   ├── login.js

将一级路由配置在入口文件 index.js 中,将一级路由下的二级路由拆分为独立的模块:

import homeRoutes from './home'
import loginRoutes from './login'

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  { 
    name: 'Home'
    path: '/home'
    component: Home,
    children: [...homeRoutes]
  },
  {
    name: 'Login',
    path: 'login',
    component: Login,
    children: [...loginRoutes]
  }
]

export default new VueRouter({
  routes
})


模块化组织Vuex状态

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。

为了解决以上问题,建议使用模块化组织Vuex,将store分割成模块。


规范组件选项的顺序

以下是个人推荐的组件选项默认顺序:

export default {
  name: '',
  parent: null,
  extends: null,
  minxins: [],
  components: {},
  inheritAttrs: false,
  model: {},
  props: {},
  data () {
    return {}
  },
  computed: {},
  watch: {},
  // 生命周期钩子,按调用顺序编写
  beforeCreate () {},
  ...,
  destroyed () {},
  methods: {},
  directives: {},
  filters: {},
  // 使用render函数时,置于末尾
  render () {}
}

按以上的顺序,组件没使用到的选项直接缺省即可。


始终为组件样式设置作用域

全局样式容易污染其他组件样式。在vue组件中一旦使用了全局的style,那么你必将陷入无限的梦魇,因为你根本不知道什么时候组件的样式就被全局样式污染了。因此,建议始终为组件样式设置作用域。


可配置的watch侦听器

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性。vue 侦听器 watch 监听属性时可以使用函数或一个包含handler处理函数的配置对象。


化繁为简的计算属性

将复杂计算属性分割为尽可能多的更简单的属性。简单、专注的计算属性减少了信息使用时的假设性限制,所以需求变更时也用不着那么多重构了。如:

computed: {
  price: function () {
    var basePrice = this.manufactureCost / (1 - this.profitMargin)
    return (
      basePrice -
      basePrice * (this.discountPercent || 0)
    )
  }
}

简化后:

computed: {
  basePrice: function () {
    return this.manufactureCost / (1 - this.profitMargin)
  },
  discount: function () {
    return this.basePrice * (this.discountPercent || 0)
  },
  finalPrice: function () {
    return this.basePrice - this.discount
  }
}


始终为列表渲染提供唯一的key值

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

v-for可以使用索引index设置key值。在发生DOM插入和删除的列表中请始终提供唯一的key值。

欢迎有兴趣的你加入本项目:Vue 最佳实践
原文 http://www.cnblogs.com/jofun/p/11454373.html
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/5098

vue中的js引入图片,必须require进来

需求:如何components里面的index.vue怎样能把assets里面的图片拿出来。 1.在img标签里面直接写上路径,2.利用数组保存再循环输出

Vue 3.0 将从头开始重写!

Vue.js 伦敦大会上,Vue.js 作者尤雨溪简要介绍了 Vue 下一个主要版本要发布的内容,不久前,尤雨溪在 medium 个人博客上发布了 Vue 3.0 的开发路线,我们不妨看看 Vue 3.0 将会有怎样的发展。

简单理解vue中的$nextTick

Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后使用$nextTick,则可以在回调中获取更新后的DOM(dom的改变是发生在nextTick()之后),这个方法作用是当数据被修改后使用这个方法

Vue的理解:Vue.js新手入门指南

从一个从未接触过除HTML+CSS+JavaScript+JQuery以外的前端技术的人到现在可以独立使用Vue.js以及各种附属的UI库来开发项目,我总结了一些知识和经验想与大家分享。

Vue常用经典开源项目汇总参考-海量

本文主要是收集与整理Vue相关的开源资料,以供需要的朋友参考。主要包含以下几方面的内容:UI组件、开发框架、实用库、服务端、辅助工具、应用实例、Demo示例

vue之nextTick全面解析

vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架。本人比较喜欢用之。在我们用vue时,我们经常用到一个方法是this.$nextTick

vue介绍

库是一种插件,是一种封装好的特定方法的集合。提供给开发者使用,控制器在使用者手里。框架是一套架构,会基于自身特定向用户提供一套相当完整的解决方案,控制权在框架本身

Vue 的 .sync 修饰符

.sync 修饰符算是 Vue 的所有修饰符中较难理解的一个,本篇文章就带你走近 .sync 的世界,深入理解后会发现,其实也就那么回事。修饰符和指令息息相关,下面从 指令 -> 修饰符 -> .sync 修饰符 由浅入深地来讲解 .sync 的含义及用法。

vue2.0之监听属性的使用心得及搭配计算属性的使用

在工作中常常需要监听某一个属性值的变化,这个时候我们就需要用到了监听属性watch,在这里我总结watch属性的三种场景使用希望对你有所帮助

Vue2 中三种逻辑复用方法

Mixin对象能够使用组件的任何属性(data,mounted,created,update等),而且当组件使用mixin时,这个mixin的所有信息也会混合到这个组件里

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!