Vue 2.0 设置路线 - 不要使用“新”来产生副作用

Question

我正在配置一个 vue 项目。 我使用了 webpack 模板。 ( npm install init webpack )。 我在终端中遇到错误 -

ERROR in ./src/main.js

✘  http://eslint.org/docs/rules/no-new  Do not use 'new' for side effects  
/Users/uz067252/Documents/Development/Vue/workex/vue-project/src/main.js:21:1
new Vue({
^


✘ 1 problem (1 error, 0 warnings)


Errors:
1  http://eslint.org/docs/rules/no-new

这是 main.js

import Vue from 'vue'
import App from './App.vue'
import Hello from './components/Hello.vue'

import VueRouter from 'vue-router'
import VueResource from 'vue-resource'

// We want to apply VueResource and VueRouter
// to our Vue instance
Vue.use(VueResource)
Vue.use(VueRouter)

// Pointing routes to the components they should use
var router = new VueRouter({
routes: [
    { path: '/hello', component: Hello },
    { path: '*', redirect: '/hello' }
]
})

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

谢谢

Answer 1

该错误来自您的 eslint 代码格式化程序，而不是来自 Vue.js 本身。

您的 webpack 环境配置为在构建和启动应用程序之前验证代码。 这样做时，您的eslint会发出该警告。

为避免这种情况，请执行以下操作（在main.js文件的最后 5 行中）：

new Vue({  // eslint-disable-line no-new
    el: '#app',
    router: router,
    render: h => h(App)
})

您在上面所做的是仅在上面的行中禁用new的 eslint 警告。 现在您的 webpack 将正常启动您的应用程序。

另一个选项是在.eslintrc.js （在项目根文件夹中）中设置规则，您可以在其中指定应忽略no-new规则。 （在这种情况下不推荐）

Answer 2

你也可以单独设置一个 vm var 和 mount

var vm = new Vue({router, render: h => h(App)})
vm.$mount('#app')

参考： https ://v2.vuejs.org/v2/api/#vm-mount

Answer 3

这个班轮规则是有用且重要的。 如果您使用任何使用new运算符副作用的框架（例如 Vue），请通过添加三个括号将其包装在匿名函数中

(()=>code)();

在你的代码中

(()=>new Vue({  // no linter directive need anymore
    el: '#app',
    router: router,
    render: h => h(App)
}))();

Answer 4

您没有将new Vue(...)语句的值分配给任何东西。

new语句创建对象的新实例。 通常这个实例被分配给一个变量。 如果您不将实例分配给变量，那么它会被垃圾收集。

linter 假设，由于您没有保留对新实例的引用，因此您依赖于操作的副作用，这是一种不好的做法。 副作用的一个例子是new操作修改了全局变量的值。