vue webpack-simple模板和Uncaught TypeError :(中间值）不是函数

Question

在main.js文件中创建IIFE方法时出现奇怪的错误。下面是重现它的步骤，转到命令提示符

vue init webpack-simple test 
cd test 
npm install test 
npm run dev 

编辑main.js文件，并在末尾添加这种方法

(function test() { 
    console.log('test'); 
})(); 

将扔在控制台下面的错误

Uncaught TypeError: (intermediate value) is not a function 
    at eval (eval at <anonymous> (build.js:978), <anonymous>:13:3) 
    at Object.<anonymous> (build.js:978) 
    at __webpack_require__ (build.js:660) 
    at fn (build.js:84) 
    at Object.<anonymous> (build.js:1378) 
    at __webpack_require__ (build.js:660) 
    at build.js:709 
    at build.js:712 

如果我测试一个正常的函数并将其称为test（），那么它不会抛出错误，为什么它在创建IIFE时有问题？

Answer 1

问题是Vue模板不使用分号。所以，你有这样的代码：

new Vue({ 
    el: '#app', 
    render: h => h(App) 
}) 

(function test() { 
    console.log('test'); 
})(); 

但空白是微不足道，你真正拥有的是：

new Vue({ 
    el: '#app', 
    render: h => h(App) 
})(function test() { 
    console.log('test'); 
})(); 

即相当于：

const vue = new Vue({ 
    el: '#app', 
    render: h => h(App) 
}) 

vue(function test() { 
    console.log('test'); 
})(); 

这会给你下面的错误：

Uncaught TypeError: vue is not a function 

这正是你所拥有的，但这次vue有一个名字，而不是一个中间值。

这是您省略分号时需要注意的一种情况。