Vue中设置非响应式const变量的最佳实践及相关问题

场景 #

在我的Vue应用中，有一个挂载SVG的Vue组件，定义了若干props，包含响应式与非响应式数据：

• 响应式数据percData放在data(){}对象中；
• colours、width、height、scale为非响应式且永不改变，不会在<template>块中调用，当前用const声明且位于export default{}块作用域之外。

问题 #

• 这些const声明的最佳位置在哪里？
• 当前这些const变量处于什么作用域？
• 更普遍地，Vue多组件应用中<script>标签的作用域如何运作？每个脚本/组件是否与全局作用域分离？全局作用域在哪里？

个人理解 #

我认为这些const应放在单独文件中，再导入到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>

相关线程未解决的原因 #

• 部分线程讨论在<template>中使用const或设置非响应式数据，与我的场景不符；
• 部分线程提到用method()返回常量，我对此存在疑问。

解答 #

1. 这些const声明的最佳位置 #

分两种情况判断：

• 仅当前组件使用：你当前将常量放在export default外部的写法完全可行，属于组件脚本的模块作用域，不会造成全局污染，且定义一次即可复用。也可以在export default内添加一个自定义的constants属性（非官方API，仅作为代码组织约定），但前者更简洁。
• 多个组件复用：将常量抽成单独的文件（比如src/constants/svgConfig.js），再在需要的组件中导入，这种方式更利于统一维护和复用，你的理解是正确的。

另外不推荐用method()返回常量，因为每次调用方法都会重新创建常量实例，完全没必要。

2. 当前const变量的作用域 #

这些const处于当前组件脚本的ES模块作用域中。Vue单文件组件的<script>代码是以ES模块的形式执行的，每个组件脚本都是独立的模块，这些常量只能在当前组件的脚本内部访问，不会泄漏到其他组件或全局。

3. Vue多组件应用中<script>标签的作用域运作方式 #

• 每个单文件组件的<script>都是独立的ES模块，拥有专属的模块作用域，组件之间的脚本作用域相互隔离，变量不会互相污染。
• 全局作用域在浏览器环境下是window对象，在Node.js/SSR环境下是global对象。只有当你直接声明var变量（无块级作用域）或主动挂载变量到window/global上时，才会进入全局作用域，但这种做法会导致全局污染，不推荐使用。
• 组件间共享数据建议通过状态管理工具（Vuex/Pinia）、props传值、导入共享模块等方式实现，而非依赖全局作用域。

内容的提问来源于stack exchange，提问作者GiuP