vue 4、编码技巧与规范

使用对象代替 if 及 switch

1
2
3
4
5
6
7
8

let name = 'lisi';
let obj = {
    zhangsan: 21,
    lisi: 18,
    wangwu: 12
};

let age = obj[name] || 18;

• 判断过后有较多处理逻辑的还需要使用if或者switch

  使用Array.from 快速生成数组

  1	let hours = Array.from({ length: 24 }, (value, index) => index + '时');

  使用router.beforeEach处理跳转前逻辑

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

  import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) // 首页 const Home = (resolve => { require.ensure(['../views/home.vue'], () => { resolve(require('../views/home.vue')) }) }) let base = `${process.env.BASE_URL}`; let router = new Router({ mode: 'history', base: base, routes: [ { path: '/', name: 'home', component: Home, meta: { title: '首页' } }, ] }) router.beforeEach((to, from, next) => { let title = to.meta && to.meta.title; if (title) { document.title = title; // 设置页面 title } if (to.name === 'home') { // 拦截并跳转至 page2 单页，$openRouter 方法在第 5 节中封装 Vue.$openRouter({ name: 'page2' }); } next(); }) export default router

• 注意最后需要调用next()方法执行路由跳转*

  路由跳转尽量使用name而不是path

  1 2 3 4 5 6 7 8

  this.$router.push({ name: 'page1' }); // 而不是 this.$router.push({ path: 'page1' });

  循环渲染添加 v-bind:key || :key (尽量使用id而不是index)

• 因为如果在数组中间插入值，其之后的index会发生该拜年，即使数据没变Vue也会进行重新渲染；

使用computed代替watch

• watch:当监测的属性变化时会自动执行对应的回调函数
• computed: 计算属性只有在它的相关依赖发生改变时才会重新求值

  统一管理缓存变量

• 使用整合的常量管理
• types.js

  使用setTimeout 代替 setInterval

  不要使用for in 循环遍历数组

• 其会遍历数组原型链上的属性

  1 2 3 4 5 6 7 8 9 10 11 12

  let arr = [1, 2]; for (let key in arr) { console.log(arr[key]); // 会正常打印 1, 2 } // 但是如果在 Array 原型链上添加一个方法 Array.prototype.test = function() {}; for (let key in arr) { console.log(arr[key]); // 此时会打印 1, 2, ƒ () {} }