Лучшая практика для установки нереактивных константных переменных в Vue?
Ситуация
В моем приложении Vue у меня есть компонент Vue, который монтирует svg, который я определил с помощью нескольких реквизитов. Это комбинация реактивных и нереактивных данных.
Нам нужны реактивные данные percData, которые, следовательно, находятся в объекте data(){}.
У нас также есть colours, width, height и scale, которые не являются реактивными и никогда ими не будут. Я не называю их в блоке <template> и не планирую их менять. В настоящее время они объявлены с помощью const и не входят в область действия блока export defautl{}.
Вопросы)
- Где лучше всего разместить эти объявления const?
- В какой области в настоящее время находятся эти объявленные const переменные?
- В более общем плане, как область действия работает для тега
<script>в Vue в многокомпонентном приложении? Является ли каждый скрипт/компонент отдельной областью действия от глобальной? И где глобальный масштаб?
Мое возможное понимание
Согласно этой теме и этой теме, я думаю, что лучшее место для моей константы было бы в отдельном файле, из которого я затем импортировал бы их в свой компонент mySvgComponent. Это правильный подход?
Мой код
<template>
<div></div>
</template>
<script>
import { mySvgComponent} from '../mySvgComponent'
import { select } from 'd3'
const [colour1, colour2, colour3, colour4] = ['#000000', '#111111', '#222222', '#3333'];
const width = 135
const height = 135
const scale = .75
export default {
name:'mySvgComponent',
data(){
return{
percData: null
}
},
props: {
summary: Object
},
methods: {
percSetup(summary) {
return this.percData = [
{ colour: colour1, perc: +summary.colour1Percentage.toFixed(2)},
{ colour: colour2, perc: +summary.colour2Percentage.toFixed(2)},
{ colour: colour3, perc: +summary.colour3Percentage.toFixed(2)},
{ colour: colour4, perc: +summary.colour4Percentage.toFixed(2)}
]
}
},
async mounted() {
this.percSetup(this.$props.summary)
const svg =
select('div')
.append('svg')
.call(mySvgComponent(this.percData)
.width(width)
.height(height)
.scale(scale))
}
}
</script>
<style></style>
Связанные темы и почему я не думаю, что они отвечают на мой вопрос:
- Как установить нереактивные данные компонента в Vue 2? , Как сделать переменную шаблона нереактивной в Vue , Как я могу использовать константу в шаблоне vue?. Я не называю свои константные переменные в своем теге
<template>, и мне не нужно, чтобы он был отзывчивым. - Как лучше всего создать константу, доступную из всего приложения в VueJs?. Может быть, я не понимаю этого до конца. Зачем мне запускать
method(), чтобы возвращать константные переменные?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
В Vue.js вы можете устанавливать нереактивные (т. е. константные) переменные, объявляя их в объекте данных как функцию, возвращающую объект, а не объявляя их непосредственно как свойства объекта данных. Это гарантирует, что переменные устанавливаются только один раз во время инициализации компонента и не могут быть изменены позже. Вот пример:
data: function () {
return {
nonReactiveConst: 'This is a non-reactive const variable'
}
}
Другой способ создать нереактивную переменную в Vue — использовать функцию Vue.observable() для создания наблюдаемого объекта, а затем назначить нереактивную переменную как свойство этого объекта.
const state = Vue.observable({
nonReactiveConst: 'This is a non-reactive const variable'
});
Затем вы можете получить доступ к нереактивной переменной внутри шаблона компонента, используя state.nonReactiveConst.
Важно отметить, что с помощью этого метода вы по-прежнему можете изменять свойства объекта, но не можете переназначить весь объект.
Vue SFC — это синтаксический сахар, необходимо понимать, в какой код он скомпилирован, чтобы эффективно его использовать.
Результатом синтаксиса SFC script является модуль ES с примерно тем же содержимым, что и тело блока <script>, с опциями name и render, добавляемыми компилятором. Тогда применимы общие практики модульного JavaScript. Константы могут оставаться в текущем модуле, если они не занимают много строк и не используются повторно в других модулях, в противном случае их можно переместить в отдельный модуль. Если константы предполагается использовать в шаблоне, их можно вернуть из функции data или setup.
Результатом синтаксиса SFC script setup является модуль ES, в котором весь блок перемещается в сгенерированную setup функцию, за исключением импорта. В этом случае объявлять константы в этом блоке неэффективно, т.к. они будут создаваться при каждом экземпляре компонента, это может быть причиной их переноса в отдельный модуль, хотя это можно считать предварительной оптимизацией.
Учитывая вышеизложенное, объем модулей Vue SFC работает точно так, как ожидается от ESM, потому что именно для этого они скомпилированы.
API композиции Vue предоставляет функцию markRaw, чтобы дополнительно предотвратить превращение постоянных объектов в реактивные, когда они используются внутри реактивных, таких как data, в случае, если это нежелательно. То же самое делается для API опций с Object.freeze в связанном вопросе.
TL;DR: код в вопросе в порядке, правильно использовать такие константы в этом случае.
Это можно сделать таким образом, но это нецелесообразно. Весь смысл «нереактивного» не имеет значения, поскольку nonReactiveConst является реактивным. И данные, и Vue.observable приводят к реактивным данным, то есть данным, которые используют реактивность Vue и имеют соответствующие накладные расходы.