乐趣区

关于vue.js:vuejs-十个最佳实践

jiezi

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

退出移动版