Vue JS语法求解读

Question

本人刚学 JavaScript 和 VueJs，看Vue官方的Demo发现这样的写法有点吃力，想请教大家这行代码什么含义，或者帮我找个教程我自己学学也行，我不知道这是JS的语法还是ES6什么的新语法，新东东太多太杂。

const createListView = id => () => import('../views/CreateListView').then(m => m.default(id))

来自（第7行）：https://github.com/vuejs/vue-...

完整代码：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

// route-level code splitting
const createListView = id => () => import('../views/CreateListView').then(m => m.default(id))
const ItemView = () => import('../views/ItemView.vue')
const UserView = () => import('../views/UserView.vue')

export function createRouter () {
  return new Router({
    mode: 'history',
    scrollBehavior: () => ({ y: 0 }),
    routes: [
      { path: '/top/:page(\\d+)?', component: createListView('top') },
      { path: '/new/:page(\\d+)?', component: createListView('new') },
      { path: '/show/:page(\\d+)?', component: createListView('show') },
      { path: '/ask/:page(\\d+)?', component: createListView('ask') },
      { path: '/job/:page(\\d+)?', component: createListView('job') },
      { path: '/item/:id(\\d+)', component: ItemView },
      { path: '/user/:id', component: UserView },
      { path: '/', redirect: '/top' }
    ]
  })
}

Answer 1

const createListView = id => () => import('../views/CreateListView').then(m => m.default(id))

箭头函数（可以看看阮老师的文章了解下）其实就是

const createListView = function(id) {
     return function () {
         import('../views/CreateListView')
             .then(function(m) {
                 m.default(id)
             });
     }
}

Answer 2

const createListView = id => () => import('../views/CreateListView').then(m => m.default(id))

这个里面可能比较让人晕头的就是这些箭头。
这个是es6里面的语法--箭头函数，本质上就是

function(id){
    // balabala
}

箭头前面的是参数，后面的函数内部实际处理逻辑。
可以去看下es6的教程，一看就明白的，这个就是各种function了。
个人理解，洗完有所帮助

Answer 3

• => es6箭头函数 入门教程

• router vue-router 配置路由

• import export module标准

Answer 4

概念错误

es6 只是 js 语法的一个版本。代码段里面是用的 js 语法，而且用了很多 es6 的特性

涉及 es6 特性

• => 箭头函数
• import 和 export 属于 modules 语法
• then 属于 Promise 语法

webpack

代码段里涉及到了 webpack 异步加载机制

// route-level [code splitting][2]

建议

新人并不适合阅读 Vue 相关源码，涉及如下知识点需要先弄清楚

• javascript 包括 es6
• webpack 相关的工程化思想
• flow 阅读 vue 源码会遇到

所以，先把基础掌握好再来看不迟