时间戳

首页 > 解决方案 > Vue.js 中全局可访问变量的性能影响是什么？

vue.js - Vue.js 中全局可访问变量的性能影响是什么？

问题描述

在 Vue 中，全局可访问的变量似乎不是常态。到目前为止，我已经找到了 3 种在组件之间共享数据的方法。就我而言，这些变量需要既可读取又可写入。

  1. 使用可变类型的Vue 实例属性。
Vue.prototype.$potato = { a: null }

this.$potato.a = "potato!";
  1. 创建一个新的 Vue 实例作为全局 mixin 来存储所有数据。
let globalData = new Vue({
  data: { $potato: null }
});

Vue.mixin({
  computed: {
    $potato: {
      get: function () { return globalData.$data.$potato },
      set: function (newPotato) { globalData.$data.$potato = newPotato; }
    }
  }
});

this.$potato = "potato!";
  1. 使用自定义 EventBus，通过发出和监听自定义事件。
import Vue from 'vue'
export default new Vue()

import EventBus from './EventBus'

EventBus.$emit('_data', payload)
EventBus.$on('_data', () => {})

一种。实现这一目标的最合适和最优雅的方法是什么？
湾。以上对性能有何影响（即，哪个最有效）？

我个人最喜欢使用第一种方法，因为它非常简单。但是，实例属性是不可变的。 这让我怀疑是否不应该为实例属性使用可变类型（例如对象或数组）。

标签： vue.jsvuejs2

解决方案

Mixins 或 globals - 根据我的经验，没有明显的性能差异。

关于优雅——mixin 不是很优雅，也不是全局的。此外，默认情况下全局变量不是反应式的。

如果您想避免使用 Vuex - 我建议您将所有全局数据移动到一个单独的单例中，如下所示：

my_global.js

export default {
  doStuff: function (a,b) { /* do something */ }
  state: {
    a: 1,
    b: 2
  }
}

并像这样使用它：

my-component.vue

<template>
  <div>{{ state }}</div>
</template>

<script>
import GLOB from 'my-global.js'
export default {
  name: 'my-component',
  data () { 
    return { state: GLOB.state }
  }
}
</script>

您还可以移动一些全局方法来操作您的全局数据，或者只是将其更改到位。一旦你在组件中使用了任何对象data()——它就会对它使用的所有组件产生反应。

推荐阅读