问题

在vue组件中有一下常量，比如选项列表等，需要在template中展示，在vue中使用常量，之前可能就直接放在data里了，但是data里的数据都是会进行数据监听的，对性能不太好。那放在哪合适呢？

Vue中使用常量的几种放肆

• 放在data里

data () {
    options: [{
        id: 1,
        name: '选项一'
    },{
        id: 2,
        name: '选项二'
    },{
        id: 3,
        name: '选项三'
    }]
}

缺点：vue对data里的所有数据都会遍历监听，这样对性能不太好。如果只是单选，那可以将选择的id使用一个变量记录，并放在data里。选项列表就可以作为常量，不放在data里。

优点：放在data里也有用途，对于多选，是需要将选项列表放入data中的，并每项添加selected: true|false，标记状态。

• 在钩子函数中定义变量

create () {
    this.OPTIONS = [{
            id: 1,
            name: '选项一'
        },{
            id: 2,
            name: '选项二'
        },{
            id: 3,
            name: '选项三'
        }]
}

优点： 在create中定义，此时data数据监听已经执行完，现在新增的数据没有被监听，可以使用全大写区分静态变量

• 封装到一个文件，统一管理

// constData.js
export const OPTIONS = [{
                    id: 1,
                    name: '选项一'
                },{
                    id: 2,
                    name: '选项二'
                },{
                    id: 3,
                    name: '选项三'
                }]