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

Posted 2023-02-22

【中文标题】Vue 2.0 设置路线 - 不要使用“新”来产生副作用

【英文标题】：Vue 2.0 setting up routes - Do not use 'new' for side effects

【发布时间】：2017-03-05 15:54:33

【问题描述】：

我正在配置一个 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)
)

谢谢

【参考方案1】：

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

您的 webpack 环境已配置为在构建和启动您的应用程序之前验证代码。在执行此操作时，您的 eslint 会发出该警告。

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

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

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

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

【讨论】：

我怎样才能从我的项目中移除 linter？

如果您正在使用 webpack 模板 (vue init webpack my-project) 开始一个新项目，您将获得一个选项“使用 ESLint 对代码进行 lint？”，您可以在其中回答“n”或否.如果您有一个想要关闭 linter 的现有项目，您可以尝试此讨论中的建议：github.com/vuejs-templates/webpack/issues/73

我有一个现有项目，我所做的就是将我的.eslintignore 更改为*.js。这就是现在的伎俩！ :-P

@dotslash 我不会删除 eslint ^^

不建议在容易修复/调整的情况下只禁用规则。

【参考方案2】：

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

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

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

【讨论】：

这是最好的答案，因为它实际上消除了使用 new 的副作用。当不将el 传递给构造函数时，没有副作用，而且更清楚发生了什么。此外，这类似于您在 Vue 3 中需要执行的操作。

【参考方案3】：

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

(()=>code)();

在您的代码中

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

【讨论】：

是的，比起重定向 linting，我更喜欢这个解决方案。至少到目前为止似乎没有任何意想不到的结果——而且可能不会。

现在，究竟发生了什么导致它满足“no-new”。是不是因为我们使用 IIFE 使它成为 表达式 而不是 语句？

我们告诉 linter：“嘿 linter！，我们不使用由 new 运算符创建的新对象，但我们知道它存在。我们（gc 可以）在这个函数之后释放内存结束。”

【参考方案4】：

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

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

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