看到赚到!重读vue2.0风格指南,我整理了这些关键规则

关于Vue 2.0 的一些风格,作者整理了一些会出错和正确的写法,希望对你有帮助。

原文:https://juejin.im/post/5edafece51882542e3023545

又是一个阳光明媚,风和日丽的周末,有人陪女神去逛街,有人陪女神去看电影,小编却默默的拿出电脑。哈哈哈,不是小编屌丝,女神正坐在旁边玩手机(感觉不是屌丝才怪)。

这两天小编重读了一遍vue2.0官网的风格指南,整理了这九条关键规则。

v-for设置键值

提到v-for需要设置键值,许多人第一反应会从diff算法的角度去讲原因,我更喜欢举一个例子来演示一下原因

假设有这样的一个页面,页面的列表是通过遍历数组得来的,如下图所示

示例代码如下

<!--模板部分-->
<div id="app">
    <div v-for="item in arr">
        {{item}}
        <input/>
    </div>

    <button @click="deleteData">删除第二个元素</button>
</div>
// js 部分
new Vue({
    el: '#app',
    data() {
        return {
            arr: [1,2,3]
        }
    },
    methods:{
        deleteData() {
            this.arr.splice(1,1)
        }
    }
})

现在需要删除第二个元素。下面我们分别在渲染列表是 不使用key,使用索引作为key, 使用唯一值id作为key,看三种场景删除第二个元素之后的效果

可以看到,不使用key,删除第二个元素之后,输入框前面的数字显示正确的,但是数字3后面的输入框的内容显示错了,应该显示 我是第三个

  • v-for 使用索引作为key 点击查看代码演示

    可以看到,使用索引作为key之后,与不使用key的效果一样,删除第二个元素之后,输入框前面的数字显示正确的,但是数字3后面的输入框的内容显示错了,应该显示 我是第三个

  • v-for 使用唯一值id作为key 点击查看代码演示

使用id作为key,显示正确

为什么v-for需要设置key,原因很简单。 对比数组 [1,2,3]和[1,3],我们很容易发现删掉了2,但是计算机不是这样的逻辑

  1. 计算机对比新旧数组,发现1===1,保持不变
  2. 然后再对比2,发现2变成了3,那么就把2修改为3,原来第二行的元素都可以复用,只把数字改一下就可以了
  3. 然后在对比3与undefined,发现3被删了,索引把第三行的元素删掉

那么为什么不能用索引作为key呢? 当删掉[1,2,3]中的2之后,数组的长度由3变成了2,那么原来数字3的索引就变成了数字2的索引了。

  1. 计算机对比key为0的值,发现都是1,保持不变
  2. 计算机对比key为1的值,发现从2变成了3,元素复用, 修改元素上面的文字
  3. 计算机对比key为2的值,发现被删掉了,所以删掉第三行元素

而对于使用id作为key,那么每条数据都有了唯一的标识,当删掉[{id:'1',value: 1},{id: '2',value: 2}, {id: '3', value:3}]中的第二个,整个过程如下

  1. 计算机取出新数据第一项的id,然后在原来数据里面寻找,发现存在相同id的数据,而且数据没有变化,所以保持不变
  2. 计算机继续取第二项的id,发现是3,然后从原来数据里面也找到了3,所以3保留
  3. 这时候旧数据里面剩了id为2的数据,而新的里面没有了,所以删掉。

没得问题嘛!!!!

模板中的复杂逻辑使用计算属性代替

vue在模板可以使用表达式是非常方便的,但表达式在设计之初是为了进行简单逻辑处理的,如果在模板中使用太多或太复杂的逻辑,会让模板的可读性和可维护性变得很差,整个模板显得很臃肿。

BAD

<!--v-if使用了一连串的条件判断,可读性比较差-->
 <button
    v-if="
      user.roles &&
        user.roles.includes('Workflowbeheer') &&
        data.userId === user.id &&
        data.status === 1
    "
  >
    删除
  </button>

Good

<template>
  <button v-if="deletable">
    删除
  </button>
</template>
<script>
export default {
  computed: {
    // 判断是否可以删除
    deletable() {
      const { data, user } = this
      // 如果当前用户不是流程管理员,则不能编辑
      if (user.roles && user.roles.includes('Workflowbeheer')) {
        // 如果当前用户为流程发起者且状态为未启动,则可以删除
        return data.userId === user.id && data.status === 1
      }
      return false
    }
  }
}
</script>

避免v-for与v-if混用

永远不要将v-for和v-if同时用在同一个元素上。

在开发vue项目中,大家可能会遇到这样的代码

 <ul>
    <li v-for="item in list" v-if="item.visible" :key="item.id">
        {{ item.name }}
    </li>
 </ul>

如果在项目中启用了eslint,则可能会看到下面这样的异常提示(需要启用eslint vue/no-use-v-if-with-v-for 规则)

The 'list' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'.

在vue处理指令的时候,v-forv-if会有更高的优先级,那么上述的代码用js可以模拟为

list.map(item => {
    if(item.visible) {
        return item.name
    }
})

通过上述代码可以看到,即使大部分数据的visible都是false,也会将整个list全部遍历一次。如果每一次都需要遍历整个数组,将会影响速度,尤其是当之需要渲染很小一部分的时候。

对于上述的问题,可以使用计算属性来处理

 <ul>
    <li v-for="item in getList" :key="item.id">
        {{ item.name }}
    </li>
 </ul>
 
 computed: {
    getList() {
      return this.list.filter(item => {
        return item.visible
      })
    }
  }

通过上述的代码,我们可以获得以下好处

  • 过滤后的列表只会在 list 数组发生相关变化时才被重新运算,过滤更高效。
  • 使用 v-for=”item in list” 之后,我们在渲染的时候只遍历需要显示的数据,渲染更高效。
  • 解耦渲染层的逻辑,可维护性比较高。

尽量使用私有属性/方法

在开发vue组件的时候,我们可以通过组件的ref来调用组件对外提供的方法,但是一个组件内部有些方法是内部私有的,不应该被外部调用,但实际上js中并没有像其他语言一样有私有方法(比如javaprivate),所以在js中一般约定使用_开头的属性或者方法表示私有的。

 {
    // 公共的
    selectRows(rows) {},
    // 私有的 外部虽然可以调用到,但是因为是`_`开头,所以按照约定不应该去调用
    _select(rows){}
 }

在vue中定义私有属性/方法又与js常规约定有所不同。在Vue内部,已经使用了_开头去定义Vue原型上面的私有属性/方法,如果在组件内上面继续使用_开头去定义私有属性/方法可能会出现覆盖实例上面属性/方法的情况,比如下面这种情况:

methods: {
    // 初始化组件的数据方法
  _init() {
    fetch().then(data => {
      
    })
  }
}

上面的代码看似没有问题,实际上运行的时候会报错,因为_init方法会覆盖Vue.prototype上面的同名方法,如下图为Vue原型链的方法,第一个便是_init

在Vue2.0风格指南中,建议使用$_来定义私有方法,可以确保不会和Vue自身发生冲突。修改上例为

methods: {
    // 初始化组件的数据方法
  $_init() {
    fetch().then(data => {
      
    })
  }
}

组件数据必须是一个函数,并返回一个对象

在说为什么组件的数据必须返回一个函数之前,我们先来了解一下js中的基本类型与引用类型。

  1. 基本类型

在es2020发布了bigint类型之后,js中的基本类型一种包含七种,分别是

  • string 字符类型
  • number 数值类型
  • boolean 布尔类型
  • undefined
  • null
  • Symbol
  • Bigint

基本类型的特点包括

  • 基本类型的值是存放到栈内存里面的
  • 基本类型的比较是它们的值的比较
  • 基本类型的值是不可变的,对值的修改会在栈内存中开辟新的空间
  • 基本类型上面不能挂载新的属性
let a = 2
let b = a
// 对a的值的修改,会在栈内存开辟新的空间,所以不会影响到b的值
a = 3
// 输出 3 2
console.log(a,b)

// 不能给基本类型上面挂载新的属性
a.testProp = '挂载的属性'
// 输出undefined
console.log(a.testProp)
  1. 引用类型 在js中,除了八种基本类型,其他都属于引用类型,像Object,Array,Function,RegExp,Date等等

引用类型的特点包括

  • 引用类型的值保存在堆内存中,而引用保存到栈内存中
  • 引用类型的值是按引用访问的
  • 引用类型的值是可变的(在堆内存中直接修改)
  • 引用类型上面可以挂载新的属性
let obj1 = {a: 1, b: 2}
let obj2 = obj1
// 因为引用类型的值是保存到堆内存的,obj1与obj2引用的是同一块堆内存空间,所以对obj1的值进行
// 修改,会直接影响到obj2的值
obj1.a = 3
// 输出 3
console.log(obj2.a)

// 挂载新的属性
obj1.testProp = '挂载的新属性值'
// 输出 "挂载的新属性值"
console.log(obj1.testProp)

通过上面的对比,我想大家其实也清楚了为什么vue的数据必须返回一个函数了。

假设我们现在开发了一个组件,组件上面的data是一个普通的对象,那么当我们实例化多个组件的时候,所有的实例将共享引用同一个数据对象,任何一个实例对数据的修改都会影响到其他实例。而将组件上面的数据定义为一个函数之后,当实例化多个组件的时候,每个实例通过调用 data 函数,从而返回初始数据的一个全新副本数据对象,这时候就避免了对象引用。

为组件样式设置作用域

在前端发展日新月异的今天,所有的一切都在飞速的发展,前端项目规模越来越大,而css作为一个只有全局作用域的语言,样式冲突会带来很多麻烦。JS语言模块已经标准化,CSS还是在不断探索,同时这也是一个急需解决的问题。现在人们提出了许多为css添加作用域的解决方法,比如BEM样式规范,比如css module。

在Vue中,使用了通过给元素添加scoped attribute的方式为css添加作用域,具体代码如下

<template>
  <button class="button">按钮</button>
</template>
<!--给style标签添加scoped属性-->
<style scoped>
.button {
  width: 50px;
  height: 40px;
}
</style>

编译之后的结果如下

<!--html 添加了一个新属性 data-v-039c5b43,对于组件内的所有元素,都会添加同一个属性data-v-039c5b43,这样保证了同一个组件内所有元素都在同一个作用域内-->
<button data-v-039c5b43="" class="button">按钮</button>
/*通过为样式添加属性选择器,去限制样式的作用域*/
.button[data-v-039c5b43] {
    width: 50px;
    height: 40px;
}

虽然我们建议为组件样式添加作用域,但是不一定必须使用vue提供的attribute scoped,对于组件库之类可能需要在外部覆盖样式,如果使用attribute scoped,因为属性名不确定,且样式权重较高,导致样式覆盖很困难.

这时候更建议使用类似BEM之类的命名规范来约束,这让覆写内部样式更容易,使用了常人可理解的 class 名称且没有太高的选择器优先级,而且不太会导致冲突。比如element ui 和 vant 均使用了BEM

将复杂页面拆分成多个多个组件文件

你有没有见过一个Vue文件里面有一大坨密密麻麻的模板代码,模板代码里面还加载了大量的v-if,v-for,v-show之类的指令,我不知道你看到之后感觉怎么样,对于小编来说,这无疑是地狱,各种逻辑耦合到一起,改bug比蜀道还要难 对于一个复杂的页面,我们建议将页面按照模块/功能进行拆分,然后写成多个小的,单一的组件,然后在主入口文件中引用。比如,对于一个复杂的页面,我们可以拆分成

header.vue main.vue footer.vue

三个文件,然后在三个文件内完成各自的逻辑,最后通过将三个组件都引入主入口文件,来实现页面的拼装。 这样做的好处包括

  • 将复杂的逻辑进行解耦,代码结构更清晰,逻辑更简单,可读性更强
  • 对功能进行组件化抽取抽象,组件复用变得更简单
  • 便于多人协作开发,不同的人可以同时开发一个复杂的页面

prop应该尽量详细

对比下面的两段代码

// 第一段
export default {
  props:['status','data']
}
// 第二段
export default {
  props:{
    status: {
      type: Boolean,
      default: true
    },
    data:{
      type: Array,
      required: true
    }
  }
}

对比上面两段代码,通过第二段代码我们可以很清楚的知道组件需要什么属性,属性的类型是什么,默认值是什么,是否是必须的,这样做的好处包括:

  • 详细的定义了属性的各方面信息,所以很容易看懂组件的用法;
  • 在开发环境下,如果向一个组件提供格式不正确的 prop,Vue将会得到警告,可以更快的发现潜在的问题。

组件名应该由多个单词组成

对于组件名应该由多个单词组成的必要性,我想到了自己曾经见过的一段代码

<header class="header">
    <!--栏目-->
    <ul>
      <li>首页</li>
      <li>关于</li>
    </ul>
</header>

看到这段代码,然后感觉很正常,没啥毛病,然后我看了一眼界面,诶,为什么header左侧有一个logo呢?我笑着说,这一定是样式里面加的咯,然后看了一眼样式,wtf,什么鬼,样式里面也没有加啊,这是怎么做到的,好神奇。后来就看到了这样的一段代码

import Header from '@/components/header'
export default {
    components: {
        Header
    }
}

我的四十米长大砍刀呢!!!!!!

为什么组件名应该又多个单词组成,因为这样做可以避免跟现有的以及未来的 HTML 元素相冲突。更关键的是,这样做不会被打,当然你也可以做,祝你好运,(手动调皮)。

本文主要参考了:

cn.vuejs.org/v2/style-gu…

juejin.im/post/5edcc2…

感谢作者,如侵权立即删除。如果您觉得本文对您有帮助,希望您可以给小编一个赞,不胜感激。小手一赞,艳遇不断,哈哈哈哈哈


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流