<template> <ul> <li v-for="(item, index) in arr" :key="item.id">{{ item.data }}</li> </ul> </template> <script> export default { data() { return { arr: [ { id: 1, data: 'a' }, { id: 2, data: 'b' }, { id: 3, data: 'c' } ] } } } </script>
7. 使用 computed 代替 watch
很多时候页面会出现 watch 的滥用而导致一系列问题的产生，而通常更好的办法是使用 computed 属性，首先需要区别它们有什么区别：
watch：当监测的属性变化时会自动执行对应的回调函数
computed：计算的属性只有在它的相关依赖发生改变时才会重新求值
其实它们在功能上还是有所区别的，但是有时候可以实现同样的效果，而 computed 会更胜一筹，比如：
<template> <div> <input type="text" v-model="firstName"> <input type="text" v-model="lastName"> <span>{{ fullName }}</span> <span>{{ fullName2 }}</span> </div> </template> <script> export default { data() { reurn { firstName: '', lastName: '', fullName2: '' } }, // 使用 computed computed: { fullName() { return this.firstName + ' ' + this.lastName } }, // 使用 watch watch: { firstName: function(newVal, oldVal) { this.fullName2 = newVal + ' ' + this.lastName; }, lastName: function(newVal, oldVal) { this.fullName2 = this.firstName + ' ' + newVal; }, } } </script>
上方我们通过对比可以看到，在处理多数据联动的情况下，使用 computed 会更加合理一点。
computed 监测的是依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才会重新计算；而 watch 监测的是属性值， 只要属性值发生变化，其都会触发执行回调函数来执行一系列操作。
8. 统一管理缓存变量
在项目中或多或少会使用浏览器缓存，比如 sessionStorage 和 localStorage，当一个项目中存在很多这样的缓存存取情况的时候就会变得难以维护和管理，因为其就像全局变量一样散落在项目的各个地方，这时候我们应该将这些变量统一管理起来，放到一个或多个文件中去，比如：
/* types.js */ export const USER_NAME = 'userName'; export const TOKEN = 'token';
在需要存取的时候，直接引用：
import { USER_NAME, TOKEN } from '../types.js' sessionStorage[USER_NAME] = '张三'; localStorage[TOKEN] = 'xxx';
使用这种方法的好处在于一旦我们需要修改变量名，直接修改管理文件中的值即可，无需修改使用它的页面，同时这也可以避免命名冲突等问题的出现，这类似于 vuex 中 mutations 变量的管理。
9. 使用 setTimeout 代替 setInterval
一般情况下我们在项目里不建议使用 setInterval，因为其会存在代码的执行间隔比预期小以及 “丢帧” 的现象，原因在于其本身的实现逻辑。很多人会认为 setInterval 中第二个时间参数的作用是经过该毫秒数执行回调方法，其实不然，其真正的作用是经过该毫秒数将回调方法放置到队列中去，但是如果队列中存在正在执行的方法，其会等待之前的方法完毕再执行，如果存在还未执行的代码实例，其不会插入到队列中去，也就产生了 “丢帧”。
而 setTimeout 并不会出现这样的现象，因为每一次调用都会产生了一个新定时器，同时在前一个定时器代码执行完之前，不会向队列插入新的定时器代码。
// 该定时器实际会在 3s 后立即触发下一次回调 setInterval(() => { // 执行完这里的代码需要 2s }, 1000); // 使用 setTimeout 改写，4秒后触发下一次回调 let doSometing = () => { // 执行完这里的代码需要 2s setTimeout(doSometing, 1000); } doSometing();
延伸阅读：对于“不用setInterval，用setTimeout”的理解
10. 不要使用 for in 循环来遍历数组
大家应该都知道 for in 循环是用于遍历对象的，但它可以用来遍历数组吗？答案是可以的，因为数组在某种意义上也是对象，但是如果用其遍历数组会存在一些隐患：其会遍历数组原型链上的属性。