Vue 2.0 настройка маршрутов - не использовать 'new' для побочных эффектов

ProgramBox

Vue 2.0 настройка маршрутов — не использовать ‘new’ для побочных эффектов

Post author:admin
Запись опубликована:14 мая, 2023
Post category:Вопросы по программированию

#javascript #node.js #vue.js

Вопрос:

Я настраиваю проект vue. Я использовал шаблон webpack. ( npm install инициализирует 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 выдает это предупреждение.

Чтобы избежать этого, выполните следующие действия (в последних 5 строках вашего main.js файл):

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

То, что вы делаете выше, отключает предупреждение eslint для new только в этой строке выше. Теперь ваш webpack запустит ваше приложение в обычном режиме.

Другой вариант — установить правило в .eslintrc.js (в корневой папке проекта), где вы можете указать, что no-new правило следует игнорировать. (в данном случае не рекомендуется)

1. И как я могу удалить linter из моего проекта?

2. Если вы начинаете новый проект с использованием шаблона webpack ( vue init webpack my-project ), вы получите опцию «Использовать ESLint для компоновки вашего кода?», на которую вы можете ответить «n» или «нет». Если у вас есть существующий проект, в котором вы хотите отключить linter, вы можете попробовать предложения из этого обсуждения: github.com/vuejs-templates/webpack/issues/73

3. У меня был существующий проект, и то, что я сделал, это изменил мой .eslintignore на read *.js . На данный момент это сработало! 😛

4. @dotslash Я бы не стал удалять eslint ^^

5. Не рекомендую просто отключать правила, когда есть простое исправление / приспособление.

Ответ №2:

Вы также можете установить переменную виртуальной машины и смонтировать отдельно

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

ссылка :https://v2.vuejs.org/v2/api/#vm-mount

1. Это лучший ответ, потому что он фактически устраняет использование new для побочных эффектов. Когда не передается el конструктору, побочного эффекта нет, и становится более понятным, что происходит. Кроме того, это похоже на то, что вам нужно будет сделать в Vue 3.

Ответ №3:

Это правило подстроки полезно и важно. Если вы используете какие-либо фреймворки — например, Vue — которые используют new побочный эффект operator, оберните это в анонимную функцию, добавив три круглые скобки

 (()=>code)();

в вашем коде

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

1. Да, я предпочитаю это решение перенаправлению компоновки. По крайней мере, пока, похоже, нет никаких неожиданных результатов — и, вероятно, не будет.

2. Теперь, что именно происходит, чтобы заставить это удовлетворять ‘no-new.’ Это потому, что мы используем IIFE, чтобы сделать это выражением , а не утверждением?

3. Мы говорим линтеру: «Привет, линтер! Мы не используем новый объект, который создан оператором new, но мы знаем, что он присутствует. Мы (gc можем) освободить память после завершения этой функции «.

Ответ №4:

Вы ничему не присваиваете значение new Vue(...) инструкции.

new Инструкция создает новый экземпляр объекта. Обычно этот экземпляр присваивается переменной. Если вы не назначаете экземпляр переменной, то это сбор мусора.

Компоновщик предполагает, что, поскольку вы не сохраняете ссылку на новый экземпляр, вы полагаетесь на побочный эффект от операции, и это плохая практика. Примером побочного эффекта было бы, если бы new операция изменила значение глобальной переменной.