vuejs 十个最佳实践

Posted 2021-09-23 Lizzy0077

1、写data的时候，用function返回一个data对象

export default {
    data() {
        return {
            title: \'segmentfault\'
        }
    }
}

2、用kebab-case命名自定义事件的名称，因为当vue发现事件名称不是这种名称规则的时候，在起内部是会被自动转换成kebab-case形式的

<button @click="$emit(\'increase-num\', 1)" ></button>
<counter @increase-num="increasseNum"></counter>

3、在用v-for指令的时候，一定要加上:key属性。如果渲染列表没有key属性，虚拟DOM就无法区分每个元素，就很难检测每个元素的变化。

<div v-for="item in items" :key="item.id">{{item.name}}</div>

4、:key使用规则：用一个独一无二的id而不是数组的index来做属性:key的值。因为，数组有可能会被add或delete元素，此时，index可能就会随着数组的变化而变化。这样很不稳定。

<div v-for="item in items" :key="item.id">{{item.name}}</div>

5、还有一个非常严肃的最佳实践：我们不应该把v-if和v-for一起用，因为v-for的优先级比v-if高很多。可以看如下代码：

<ul>
    <li 
    v-for="car in carList"
    :key="car.number"
    v-if="car.isActive"
    ></li>
</ul>

在这个例子里，vue会先把所有的list item都渲染出来，然后再检测v-if的操作。但是，现实场景中又会出现这样的需要，我们应该如何解决呢？我们可以用computed过滤掉不是active的car，代码如下：

<ul>
    <li 
    v-for="car in activeCarList"
    :key="car.number"
    ></li>
</ul>

export default {
    computed: {
        activeCarList() {
            return this.carList.filter(car => car.isActive)
        }
    }
}

6、数据变化，用computed，不要用methods。

// Using computed:

var vm = new Vue({
 el: ‘#example’,
 data: {
     firstName: “John”,
     lastName:”Doe”
 },
 computed: {
    setFullName: function () {
    return this.firstName + ‘  ‘ + this.lastName
 }
 }
})

// Using methods:

methods: {
 setFullName: function () {
    return  this.firstName + ‘  ‘ + this.lastName
 }
}

7、v-if能合并写就合并写
8、给input元素加key，如下key=“username-input”，能保证在v-if切换中，input重新渲染。

<template v-if=“loginType === ‘username\'”>

 <label>Username</label>

 <input placeholder=“Enter your username” key=“username-input”>

</template>

<template v-else>

 <label>Email</label>

 <input placeholder=“Enter your email address” key=“email-input”>

</template>

9、监测数组、对象变化
由于vue2使用Object.defineProperty(data, key, {})去监听数据变化的，存在监听上的缺陷。无法监听到对象新增或删除key，数组也是采用了hack的方式，在增删数组的函数里做了监听。
因此，当需要在数组新增元素的时候，不要这样写：vm.arr[index]=newValue
有以下三种写法：

Vue.set(vm.arr, index, newValue)
vm.arr.splice(index, 1, newValue)
vm.$set(vm.arr, index, newValue)

对象新增属性，有两种写法：

Vue.set(vm.obj, newKey, newValue)
vm.$set(vm.obj, newKey, newValue)

10、指令的简写和全写不要混用v-on:click @click